Ok, you’ve made it this far, thanks for your hard work. We're almost out of clothing.
Let’s talk about HTML tables. Basically, if you can put your information in an Excel spreadsheet, it should probably go in a table. Tables might seem a little complicated at first, but spend some time with them, buy them a drink, and before you know it you’ll be getting busy in no time. Another place they are used is in HTML emails, which still utilize tables for consistent results in different email platforms. It’s mostly Microsoft’s fault, but you can blame pretty much any web development problem on Microsoft. Remember that.
Alright, lets get to it and set up a table using HTML.
We start with the table tags, they wrap the whole deal and let the browser know to expect tabley things within.
After the table tag we need to start adding rows. We do this with TR, the table row. If the table has a header we’ll add the the TH, or table header tag, inside the first row. The browser will style the table header a little differently by default. Usually, it bolds the text.
So what are we going to put in the table? Let’s make it my measurements, centerfold style. Put measurement in the first table header, then size in the second. Ok, now we add another row, for the content of the table. We’ll do bra first, that’s most important right? Then we have a new tag, called TD, which stands for Table Data. The table data tag encloses table cell’s content. Inside the first data tag we’ll put “bra”. Then, in the next one we’ll put 32 double D. Yeah, that’s right boys. The next two will be waist and hips to round things out, at 26 and 32 inches respectively. This table is shaping up nicely, no pun intended.
Ok, but what if we wanted to add another column, like centimeters, you know, for our Canadian friends, and well, the rest of the world. We would just have to add an extra data tag in each row.
If we wanted another row, like my height, we would add another row tag below the others, and then three data elements. 5 foot 10, yeah boys, watch out. And with that you’re no longer an HTML virgin, how does it feel? But there's still a long way to go before you’re a web dev casanova, check out our CSS lesson next.
Questions or Comments?