I would like to create some lists like the ones found here at this Wikipedia page. http://en.wikipedia.org/wiki/List_of_Pokémon Any ideas on where to learn this?
You would need to use a table. I still can't post links, but search for "html table" and Im sure you'll find all kinds of sites with tutorials
I found one. I have another question: Are using these tables for data SEO okay? I have never used tables, and I know tables are bad for layouts / themes.
Why not? Let's say it isn't a good idea to use them to define your website structure, but when you need them in content? I don't see a problem with them.
Thanks a lot of answering. I am going to get started on my content then. By the way I have added rep.
The table tag exists for a reason, to display tabular data. If you have information that can be presented in MULTIPLE rows and MULTIPLE columns, where the data in each row is related and the data in each column is related, then a table is the semantically correct tag to use and there is nothing wrong with doing so. The problems with tables came from two avenues. The first is the most commonly discussed, using tables when it's inappropriate. If you are only going to have one data field (TD) per row, there's probably no reason to have a table. If you are only going to have one TR (table row)... then there's probably no reason to have a table... if you are only going to have one of each, the ONLY acceptable reason to be using a table is the one thing CSS is still a miserable failure at, vertical positioning dynamic height content inside a fixed height container. Unfortunately most of your people who made endless nested table layouts, today just make endless nested DIV's or abuse tags with meanings - like definition lists, into acting like a table. Net change zero and those methods are just as bad as using tables for layout. It's particularly bad when you have the idiots who when told "Don't use tables for layout" instead heard "Don't ever use tables" and spend hours dicking with nesting and tag abuse to display obviously tabular data - like a forum index - without using tables. But that stems from most people having never taken the time to learn to use tables properly in the first place, much less take the time to use simple indentation to prevent yourself from making mistakes in a table in the first place. An example I use a good deal is when you see this type of trash: <table class="border" cellspacing="2" cellpadding="8" border="0" bgcolor="#888888"> <tr><td class="bigHeading" colspan="4"><font size="3"><b>General Discussion</b></font></td> <tr bgcolor="#FFFF88"><td width="80%"><b>Topic</b></td><td width="5%" bgcolor="#EEEE77"><b>Views</td><td width=5%><b>Replies</b></td><td width=20% bgcolor="#EEEE77"><b>Last Post</b></tr> <tr bgcolor="#FFEEDD"><td width=80%><a href="?viewtopic=discussSomething0018">Discuss Something</a></td><td width=5%bgcolor="#EEDDCC">32</td><td width=5%>8</td><td width="20%" bgcolor="#EEDDCC"><a href="?viewtopic=discussSomething0018&start=117">Yesterday by Jimbo</a></tr> </table> Code (markup): The obvious problem most people can see is the lack of properly closed tags, something that simply adding formatting would instantly reveal as would syntax highlighting or validation, but the problems run a lot deeper. Even other obvious 'issues' like inconsitant wrapping of attribute values and percentages not adding up aren't the real problem. Hell, the inlining of presentational values aren't even really it. No, the biggest problem there comes from using the wrong markup for the table. Believe it or not there are other tags that go into tables besides TR and TD!!! CAPTION, THEAD, TBODY, TFOOT, TH - it often seems most coders have never even heard of these much less how to use them... using tags like font and bold, or attributes like colspan instead of the proper heading tags is nothing but /FAIL/. Coded 'properly' there is little reason for that to be much more than: <table class="boardIndex" cellspacing="2"> <caption>General Discussion</caption> <thead> <tr> <th class="topic">Topic</th> <th class="views">Views</th> <th class="replies">Replies</th> <th class="lastPost">Last Post</th> </tr> </thead> <tbody> <tr> <td class="topic"> <a href="?viewtopic=discussSomething0018"> Discuss Something </a> </td> <td class="views">32</td> <td class="replies">8</td> <td class="lastPost"> <a href="?viewtopic=discussSomething0018&start=117"> Yesterday by Jimbo </a> </td> </tr> </tbody> </table> Code (markup): ... and the classes wouldn't even be necessary if IE supported CSS3 (or even CSS 2.1) properly, or if FF supported colgroups properly (see the eleven year old Bugzilla 915). Likewise cellspacing would be unnecessary if FF and IE both didn't compeltely botch border-spacing... but even with those it's 33 bytes less code even WITH formatting. EVERYTHING else goes in the CSS (where it belongs). Many people will say tables are semantically incorrect even for tabular data - we call these people morons. The above is semantically correct, and provides good accessibility. So it's ok to use a table, just learn HOW to use one.
If you search for jQuery table plugin' then you can use the code to get sortable table like this in your own web page.
Oh for pissing on Christ!?!?! What the bloody blue hell is wrong with you people!!! jquery, jquery, jquery - it's like everybody's ***** for jquery. It's a steaming pile of trash propagated by asshats who can't be bothered to write javascript properly. I swear Dan is rolling over in his grave.
Lawlz. I'm sure jQuery has a place... somewhere... In any case, Wikipedia sure doesn't need Javascript of ANY sort to display that table. If it did, folks like me would never be able to see it (okay who needs a table of Pokemons? but all of Wikipedia's tables are pure HTML/CSS). Not everyone has Javascript, therefore do not use it for displaying plain content or essential site functionality. Or are you trying to hide your table from the Googles, those using mobile devices, older screen readers or text browsers? Re the table: where are your scope attrs?? Scope makes a huge difference when taking a listen in JAWS. Curious about the cell-padding thing.
Maybe someone with a Pokemon website? I found this one by the way: http://www.kryogenix.org/code/browser/sorttable/ It seems to work good. However I cannot seem to be able to change the width of the columns. They are all the same size, which is based of the width of the whole Table itself. I have tried adding extra width tags but I cannot get it to budge. Anyone have any idea?
Width tags? Go ahead and post the HTML and CSS that you currently have on your page (at least the table html and css). The Javascript is an extra (as it should be) so it's not an issue here, you don't need to post it.
Here is the CSS and HTML that was default with the download. CSS } table.sortable { border-spacing: 0; border: 1px solid #000; border-collapse: collapse; } table.sortable th, table.sortable td { text-align: left; padding: 2px 4px 2px 4px; width: 100px; border-style: solid; border-color: #444; } table.sortable th { border-width: 0px 1px 1px 1px; background-color: #ccc; } table.sortable td { border-width: 0px 1px 0px 1px; } table.sortable tr.odd td { background-color: #ddd; } table.sortable tr.even td { background-color: #fff; } table.sortable tr.sortbottom td { border-top: 1px solid #444; background-color: #ccc; font-weight: bold; } Code (markup): HTML <table class="sortable" id="anyid" cellpadding="0" cellspacing="0"> <tr> <th>Numbers</th> <th>Alphabet</th> <th>Dates</th> <th>Currency</th> <th class="unsortable">Unsortable</th> </tr> <tr> <td>1</td> <td>Z</td> <td>01-01-2006</td> <td>€ 5.00</td> <td>Unsortable</td> </tr> <tr> <td>2</td> <td>y</td> <td>04-13-2005</td> <td>€ 6.70</td> <td>Unsortable</td> </tr> <tr> <td>3</td> <td>X</td> <td>08-17-2006</td> <td>€ 6.50</td> <td>Unsortable</td> </tr> <tr> <td>4</td> <td>w</td> <td>01-01-2005</td> <td>€ 4.20</td> <td>Unsortable</td> </tr> <tr> <td>5</td> <td>V</td> <td>05-12-2006</td> <td>€ 7.15</td> <td>Unsortable</td> </tr> <tr class="sortbottom"> <td>15</td> <td></td> <td></td> <td>€ 29.55</td> <td></td> </tr> </table> Code (markup):
Here is the CSS and HTML that was default with the download. CSS } table.sortable { border-spacing: 0; border: 1px solid #000; border-collapse: collapse; } table.sortable th, table.sortable td { text-align: left; padding: 2px 4px 2px 4px; width: 100px; border-style: solid; border-color: #444; } table.sortable th { border-width: 0px 1px 1px 1px; background-color: #ccc; } table.sortable td { border-width: 0px 1px 0px 1px; } table.sortable tr.odd td { background-color: #ddd; } table.sortable tr.even td { background-color: #fff; } table.sortable tr.sortbottom td { border-top: 1px solid #444; background-color: #ccc; font-weight: bold; } Code (markup): HTML <table class="sortable" id="anyid" cellpadding="0" cellspacing="0"> <tr> <th>Numbers</th> <th>Alphabet</th> <th>Dates</th> <th>Currency</th> <th class="unsortable">Unsortable</th> </tr> <tr> <td>1</td> <td>Z</td> <td>01-01-2006</td> <td>€ 5.00</td> <td>Unsortable</td> </tr> <tr> <td>2</td> <td>y</td> <td>04-13-2005</td> <td>€ 6.70</td> <td>Unsortable</td> </tr> <tr> <td>3</td> <td>X</td> <td>08-17-2006</td> <td>€ 6.50</td> <td>Unsortable</td> </tr> <tr> <td>4</td> <td>w</td> <td>01-01-2005</td> <td>€ 4.20</td> <td>Unsortable</td> </tr> <tr> <td>5</td> <td>V</td> <td>05-12-2006</td> <td>€ 7.15</td> <td>Unsortable</td> </tr> <tr class="sortbottom"> <td>15</td> <td></td> <td></td> <td>€ 29.55</td> <td></td> </tr> </table> Code (markup): My web-pages version just add edited colors and added Data. I have tried many things to be able to set all the widths of all the columns. Cannot work it out. NEVERMIND I have worked it out.
Jquery is the best. If you want to make a dropdown, get some tabs happening, some form validation; you know, stuff that you couldn't possibly do with less code. How's it go again? Build the site with JS than sprinkle a bit a seasoning of HTML & CSS around to finish it off? Haha
That's exactly how it goes : ) Lawlz. Actually, (and seriously) if I ever get involved with a JS library, it might be MooTools, since they consider their "library" to be nothing more than an extension of the Javascript language and a correction of some of its faults... and unlike jQuery, it's not restricted to the DOM. Server-side Javascript? I've always wanted to try that (esp since my hopes of running a website on LOLCODE died). Loading a whole library for a small thing like a table, bleh. It's like a shotgun for killing a mosquito, even at a small 15kb. @BlueEew, glad you got it worked out.
The ONLY good thing about jQuery is allows JS n00bs (like me!) to throw together a few plugins and get a lot done in a short amount of time. It's the same as PHP frameworks such as CodeIgniter, CakePHP... absolutely bloated, just designed to get "a lot done in no time", ultimately increasing your hourly rate, which is basically why in business after all. Semantics & speed pretty much always get the backseat.
Which is funny since usually it ends up no more code than if you bothered to learn javascript in the first place, takes no more or less time (usually less since in most cases you have less code) It's a sleazeball shortcut used by people too shortsighted to realize in most cases they are making MORE work for themselves, not less.