Meet It Head On!

What is difficult for you? Tables? Columns in CSS? Adding Padding?

Maybe the better question is How do you deal with this difficulty? Do you just ignore it? Do you try to excuse it with a nervous chuckle "Hehe, I'm just not good at Tables?" Do you use other means to overcome the deficit?

Why not learn Tables? Why not learn columns in CSS? Why not learn about adding Padding?

I'm serious, why not? There aren't a dozen things to know about most tags and attributes and I can guarantee you that if you can drive a car or bake a cake or even order dinner from a menu, you probably have already mastered things that are much more difficult than whatever it is you lack in the world of HTML or CSS understanding.

Let's take tables, for example. Tables are our most common compound tag. Compound tags require two or more tags to "build" a page element. In the case of Tables, we have <table> tags indicating where in the document our Table begins and ends, but then we must describe the actual table itself. In a way, the <table> tags are no different from any other tags. <p> tags indicate the beginning and </p> tags indicate the ends of paragraphs. Whatever it is that a paragraph is and does, we know where it begins and where it ends. With Tables, it's no different. We use <table> and </table>.

So, we have indicated where the Table starts and ends. Now we have to describe the Table itself. This is done left-to-right, in rows. You cannot have anything in a table if it doesn't appear within a row. That is, there must always be at least one row. Table Rows, in keeping with HTML's easy-to-remember tag naming scheme, are put down as <tr> and </tr>.

Once again, while it is necessary that these tags occur within the original <table> tags, there really is nothing special about Table Rows. These tags indicate where on the page, and where within the Table, a Table Row begins and ends.

Finally, the Table Data cells need to be identified. Hmm… Table Data. Do you suppose that's how they arrived at <td> and </td> as the tags involved? And do you think, as straightforward as all of the other tags are, that things would suddenly get jumbled and complicated, now? Or do you suppose that <td> tags merely show where within each Table Row a Table Data cell begins and ends?

So what have we built, so far? Well, we have indicated where on the page our Table should begin and end. We have indicated where within the Table a Row should begin and end, and within that Row, where the Table Data begins and ends. So taking that knowledge, just that little bit of understanding, what kind of table do you think this creates?

<table>
<tr>
     <td></td>
     <td></td>
     <td></td>
</tr>

<tr>
     <td></td>
     <td></td>
     <td></td>
</tr>
</table>

If this looks to you like a single Table, with two Rows, each with three cells, you're correct. See? It's really not that difficult. Just a few simple rules need to be followed: The number of cells in each row must always be the same. And we should not use Tables for page layout.

You can create some very intricate designs on your page using Tables. Columns, headers, borders and so on can all be created and manipulated at will. Where two, three or more boxes need to be reduced into a single box, we can use attributes such as colspan="" or rowspan="" to get the numbers to balance. In our table example above, if we were using the entire first row as a heading or some other single-column entity, we could have added a colspan="3" attribute to our first <td> tag. This is saying that the first Table Data cell actually spans three columns. This balances the number of cells in every row. The first row includes a single Table Data cell that now spans three columns, while the second row actually includes three <td>'s. The two are equal, so everything is fine.

There are several attributes we can apply to Tables. Cellpadding, cellspacing, a border width for example. And of course Tables can be styled using CSS to a degree that Table attributes don't allow. You can elect to have all borders appear as a single pixel, by applying border="1" to the table. But using CSS, we could style the bottoms of the boxes one way and the sides another. We could even make the left-side different from the right-side border, alternate background colors in rows, etc. CSS rocks, remember!

There are many little things involved, but none of this is as hard as doing your own taxes or taking the training wheels off of your child's bicycle. If you can dedicate only fifteen minutes every day to the task of Learning About Tables, you can learn it all within a week, probably. And, once you know it, you can keep that knowledge for the rest of your life. That's a bargain, isn't it?

And then you can get on with the task of learning The Next Thing.