Basic HTML Tables Tutorial
Screeeeeeech! Clunk.
That's the sound of someone in the process of learning to hand-code coming to an abrubt halt when it comes time to learn HTML tables.
Tables seem to confound most every newbie coder, at first, but trust me. They're really not that hard once you understand what's going on. And I promise, that you will know how to code HTML tables completely by hand, by the end of this section! But first, I must take another rare occasion to digress and tell you what all the tables controversy is about...
HTML Tables Don't Suck...
Really they don't. Or at least not as much as the nerds want you to believe. One of the most popular "learn HTML" sites on the internet, while disparaging the use of tables for web page layout, admits that the very site that the remarks are written in, is laid out with... wait for it... TABLES!
For several years now, since the advent of CSS, it seems it has become fashionable to make fun of webmasters/websites who use tables for web page presentation. I'm not sure how this happened, but my guess would be that everyone thought (hoped) that CSS's positioning possibilites would free designers from the confines of a table-style layout.
Sorry to say, it hasn't really happened. The problem is with cross-browser compatibility. Different web browsers treat CSS's positioning properties in dramatically different ways. As such, to lay out a web page with rows and columns while keeping things centered (all the fancy stuff that we like) without the use of tables, while having it look the same in every browser, has become the "Holy Grail" of web designers and is neither easy nor practical.
Why You Should Not Use Tables...
Beats me.
Seriously. The ONLY consistent argument I've heard for not using tables to lay out a web page is that they were made "to hold data," and so [insert whiny nerd voice], "They weren't made to do that."
Are you kidding me??? That argument is tantamount to saying that you shouldn't use an old tire to make a swing because tires weren't made for that. C'mon, we already had the old tire (we didn't have to invent something new), and the kids seem to like it just fine. Besides, isn't text, data? Aren't images, data? Why re-invent the wheel? Ok [insert sheepish smile], there is ONE reason...
Why You Really Should Not Use Tables...
Yes, there is but ONE, and only one (I defy anyone to give me any other REAL reason) not to use tables to lay out web pages. Page load time...
By design, a table must load to the user's computer in its entireity before being displayed in the browser window. So, if you have one very large table with tons of images and boatloads of text, the browser must gather all the information about everything contained within the table before it even begins to display the table on the page. This means that if everything on your big, image-laden page is contained within the table, the page will appear blank until the browser has everything it needs to start displaying.
"Hey! Wait just one minute!", you say. "It's still nearly the same amount of data, inside a table or not. How can it make the page take longer to load?" A very astute observation on your part, Young Grasshopper. Truth is... it doesn't. But, it does makes it seem like it's slower. If the page has no tables, it begins to load elements one by one, (pretty much) from the top down. So, when the page appears, things begin loading in the window immediately. And while you're reading the top of the page, individual items are still loading (out of sight) in the bottom of the page, making the entire page seem to load faster.
Why is loading time important? Well, how many times have you gotten tired of staring at a blank page for more that a just a few seconds and then just closed the window? Tables work well for what we do and should be used when needed. But, because of their slow-loading, you should use alternatives when PRACTICAL (meaning, not spending two days trying to find a work-around) such as using multiple, small tables or using div's until you get to a point where you "need" a table. That being said, use tables freely, but judiciously, and with confidence in understanding...
HTML Tables Made Easy...
Hooray! I'm the first person to discover the reason why people have a hard time learning HTML tables! Well maybe I'm not the first to discover it, but maybe I'll be the first to address it. The problem is quite simply one of "spatial awareness" of sorts.
Until HTML beginners get to table tutorials, everything they learn about hand-coding a web page follows a linear, left-to-right, top-to-bottom, progression. Because of a table's ability to graphically position an element(s) to the top-right of something or to the bottom-left of something else, its code (strictly top to bottom) seems nonsensical... Until now...
My First Table...
Copy/paste the following new table code to your index.html page...
<head>
<title>ChangRox.com</title>
<link rel="stylesheet" type="text/css" href="changroxstyle.css" />
</head>
<body>
<p class="crrt">Hello World!</p>
<div class="redborderwhtbg">
<p>Welcome to <span class="dingleberries">ChangRox.com!</span></p>
</div>
<p>The site for extolling the virtues of Chang.</p>
<p><a href="pagetwo.html">Click here to go to Page Two!</a></p>
<table>
<tr>
<td>
Cell 1 - Row 1
</td>
<td>
Cell 2 - Row 1
</td>
</tr>
<tr>
<td>
Cell 3 - Row 2
</td>
<td>
Cell 4 - Row 2
</td>
</tr>
</table>
</body>
</html>
Save/refresh to see the result. I know, it doesn't look like much. That's because tables have no colors/borders by default and stretch/shrink to fit their contents unless height/width is specified. To make what's going on a little clearer, let's put some borders in the table by adding this code to your stylesheet...
background-color: silver;
font-family: Arial;
}
.crrt {
color: red;
}
.dingleberries {
color: red;
font-weight: bold;
font-style: italic;
}
a:link {
font-weight: bold;
color: brown;
text-decoration: none;
}
a:visited {
font-weight: bold;
color: brown;
text-decoration: none;
}
a:hover {
font-weight: bold;
color: green;
text-decoration: underline;
}
a:active {
font-weight: bold;
color: green;
text-decoration: underline;
}
a img {
border: none;
}
.redborderwhtbg {
border-style: solid;
border-width: 1px;
border-color: red;
background-color: white;
}
table {
background-color: white;
border-width: 2px;
border-style: solid;
border-color: red;
}
td {
border-width: 1px;
border-style: dotted;
border-color: blue;
}
Save your stylesheet, then refresh index.html to see the result.
As before, using CSS, we're affecting the "body (<body>)" and "td (<td>)" selectors from the external stylesheet. In this case we've instructed the browser to apply a white background with a 2 pixel wide, solid red border when it encounters the <table> tag, and similarly apply a 1 pixel wide, dotted blue border every time it encounters the <td> tag. Because we've not specified a background for the <td>'s, they remain transparent and the table's background color of white, shows through.
Still pretty confusing, I know...
Why HTML Tables Are So Confusing...
Quite simply, it's because of the way we ident the code. I know you want to kick me for teaching you something that makes learning a bit harder, but once you get used to it, you'll forgive me.
Think back to when we were studying good coding practices. Remember that the reason we indent the code is so that we don't have mile-long lines that we have to scroll left/right to read. All of the extraneous line breaks are ignored and the browser interprets everything as being on one line until it reaches a closing tag (or runs out of room).
In our table, each Table Row (<tr>) tag instructs the browser to start a new ROW of Table Data (<td>) cells. Each <td> automatically creates a new column in the table.
Pretty simple when you look at it that way. Where it gets confusing is in the way we write the code...
Remember, that line breaks in our code are ignored by the browser. In this case, the line breaks following <td></td>'s are ignored and the cells are all treated as being on one line, or one Table Row until a new <tr> is created.
In reality, a clearer way to write the code would be to write the <td>'s all on one line. Compare the two and see if you get a clearer picture of what's going on...
Both of these produce exactly the same result. Yes, the second example is easier to understand but, our simple table contains only a bit of text and just a few <td>'s. You could have a table with hundreds of cells per row with thousands of words. It would be way too cumbersome to have 100+ <td>'s scrolling left-right across your code.
HTML Tables Simplified...
By this point you should have a pretty good understanding of basic table structure. If not, review this page until you do because it's going to get just a little more difficult, but WAY more useful.
Advanced HTML Tables Tutorial Coming Soon...
© 2008 - 2011 fapmaster.com