Website Administrator Know How Articles

Supplementing Tables in xhtml with CSS (lesson two)

Plan your basic Table layout

In this particular introductory lesson, you will learn the benefits of planning your xhtml table layout and how to setup a neat border around your core data and how to introduce the header and footer sections to your table design. We will also learn to put in a simple css command to make sure out layout is going to plan.

So in the first lesson, you learned how to setup a basic 5x5 table, which was pretty boring, and then we learned that this is actually quite a cool layout to work with as we can use it to formulate one of the most basic and popular 'classy' webpage outlines we have on the internet. So let us layout the design by either typing straight into the cells that need to be merged, or you can do it on paper. This way we know where we are going with our design.

Use Span to create Borders, Headers and Footers to see a classy 5x5 Table take shape

When we are working with tables, the html code we present in it's written form will be done in 'row' format. That is, we are coding the look of the table row by row. And we can clearly see we have five rows here. This means we will have five <tr> </tr> pairs in our code. Each TR pair will correspond exactly to each row layer in our Figure 1 example.

And if it isnt already obvious, the TR element tag has it's meaning in an abbreviated form. The proper full name is Table Row, and the TD element tag is an abbreviation of Table Data. There is also a TH (Table Header) which is similar to TD, but only the TD element can play the part of either if we are to follow the W3C recommendations. We are only going to concern ourselves with the TD and TR tags in our code today.

Rows go left to right across the page, columns are left to right down the page. And if we count the number of named items which appear in each row in our figure 1 layout diagram, we see that rows 1, 2, 3 and 5 each consist of three items. Row 4 only has a single item listed. This means that each of our <tr> </tr> pairs will have three <td> </td> pairs except for the forth TR pair, which will only have a single solitary TD pair as we can see by viewing the xhtml-html code under Figure 3 below.

Our Figure 1 chart also shows us exactly which cells we need to merge and in what exact column or which exact row. In table talk, we call this combining of data cells into one single cell "span". In our Figure 1 diagram, The "-" represent required column spans while the "|" represent the row spans which we need to put in, so our spans are going to be...

And while we are at it, let us also introduce some CSS formatting into the head section of our html to color our borders...

and then we can use 'class=' inside the respective TD tag, some of which are also going to include span instructions, to define the nature of the cells and now we have our table totally bordered.

If you are unsure on how to insert the span and class code correctly, review the completed html code at the bottom of this page.

Note: border-collapse:collapse; removes that space between the cells which otherwise seems impossible to get rid of.

C is corner, V is vertical and H is for horizontal. And while we were editing our source code, we should have also added the other "spans" for our header, footer and borders. We also take this opportunity to lose any reference to "border" in our table tag and the resultant table will be looking something like this (you can cheat and grab the code from near the bottom of this page)...

Colgroup, Col and Colspan

If you would like to initially define the number of columns our table "spans", we use either the Colgroup tag or the Col tag. You can also use colspan in the TR tags. We have used colspan for our horizontal borders, header and for our footer.

Specifying <Col span="5" /> before the first TR gives our table structure (even though this is not it's purpose) and ensures we code our page correctly. You will need to specify the widths of each column if important to you. Alternatively, you can specify a "colgroup" for each column and specify the widths or other common attributes there. But we are going to do all this elsewhere so we will only let the browser know our table is five columns wide for now.

Simple table layout error checking to test our formatting with CSS

You may find the need to introduce extra rows or columns and this can be annoying if they dont line up because you have failed to introduce a TR or TD command or close one in the right spot.

The best way around this is to insert colored border code into your CSS which you can then set to "zero" when you have your problem sorted.

We do this by adding td {border: 3px solid #C00;} into our list of CSS commands in the header. To turn it off we simply set 3px to 0 or 0px. As you can see by figure 3, this surrounds each browser perceived TD (spans are one TD) with a red border so that you can easily spot at which point your table has gone askew.

And of course, these red outlines should match our original layout as given in figure 1 above, and they all do, so it is all rosy and we can hear the accolades for our efforts beginning to sound in the distance!

Our code so far... (the above CSS goes into the Head of your HTML -and dont forget to reset the red TD border to 0px in the css part of the code,. You might have noticed i have snuck in some extra centering code in that above css section for you so that the table presents a little nicer. I'll cover that briefly in the next lesson but for now let's make sure we put this next part into the Body section of our html.)

And that concludes the second lesson in this series of "Supplementing Tables in xhtml with CSS" articles. And if you understand the above, then you are now ready to progress to Lesson Three by selecting the link below, we might even demonstrate an inversion of this method too like in Figure 4! (The lesson might still be in progress if it doesnt go anywhere...)

Lesson Two - Figure 4
Also in the next lesson: How to border our Table with a favorite photo