SEARCH
  Tutorials HTML and CSS Tutorials Tables in xhtml

Tables in xhtml

Joseph Skidmore Tutorials Jul 27, 2006

Probably everything you will ever need to know about tables in this tutorial. I am going to show you how to apply styles to them so you can have valid coding weather you are using HTML 4.01 Transitional / Strict or using XHTML.

Tables Reference Sheet. This page contains working examples of all the code that I am using throughout the tutorial.

Now lets begin, to create a very basic table the code would be:

<table border="1">
<tr>
<td>content</td>
</tr>
</table>

content

Now you will need to set the width and height attributes for the table and the table cells.

<table width="200" height="200" border="1">
<tr>
<td width="100" height="100">top left cell</td>
<td width="100" height="100">top right cell</td>
</tr>
<tr>
<td width="100" height="100">bottom left cell</td>
<td width="100" height="100">bottom right cell</td>
</tr>
</table>

Now you see in this code the entire table width and height are both 200px, each cell within the table are 100px width and height each, all adding up to 200px.

top left cell top right cell
bottom left cell bottom right cell

Table with only 1 cell on the bottom row.

<table width="200" height="200" border="1">
<tr>
<td width="100" height="100">top left cell</td>
<td width="100" height="100">top right cell</td>
</tr>
<tr>
<td colspan="2" width="200" height="100">bottom spanned cell</td>
</tr>
</table>

Now you can see a new attribute in this code, the colspan attribute, this means how many columns the cell should be spanned across, in this case 2, because there are only 2 columns we want the cell to be spanned over. You should also notice the width of the cell now has been changed to 200, this is because we are adding up the total of the cells that the new cell is spanning across.

top left cell top right cell
bottom spanned cell

<table width="200" height="200" border="1">
<tr>
<td width="100" height="100">top left cell</td>
<td rowspan="2" width="100" height="200">right spanned cell</td>
</tr>
<tr>
<td width="100" height="100">bottom left cell</td>
</tr>
</table>

Now you will notice we have the attribute rowspan, this is the same as the colspan attribute except for the fact it controls the amount of rows the cell spans.

top left cell right spanned cell
bottom left cell

This code would not validate in XHTML or HTML 4.01 Strict because the width and height attributes are removed in favour of using stylesheets (CSS). CSS can be placed in the head of your page or it can be placed in an external stylesheet. There is also another way, you can add styles to your tags.

E.G.

<table style="border: 1px; width: 100%; width: 100%;">

By adding styles instead of using <table width="100%" height="100%"> you will get valid coding and in most cases less code bloat (repeating code).

<table style="border: 1px solid black; width: 200px; height: 200px;">
<tr>
<td style="border: 1px solid black; width: 100px; height: 100px;"> top left cell</td>
<td style="border: 1px solid black; width: 100px; height: 100px;"> top right cell</td>
</tr>
<tr>
<td style="border: 1px solid black; width: 100px; height: 100px;"> bottom left cell</td>
<td style="border: 1px solid black; width: 100px; height: 100px;"> bottom right cell</td>
</tr>
</table>

Now you will see that we have applied a border to both the table and td tags, the codes I used were 1px solid black - This just means that the border will be 1 pixel thick, solid lines and color black. I have also added a width and height attribute to each of these, since all of these tags have all the same attributes and values it would be a good idea to put the CSS in the head tag, but now we are going to give each tag a different value.

top left cell top right cell
bottom left cell bottom right cell

<table style="border: 1px solid black; width: 200px; height: 200px;">
<tr>
<td style="border: 1px solid black; width: 100px; height: 100px;"> top left cell</td>
<td style="border: 1px solid black; width: 100px; height: 100px;"> top right cell</td>
</tr>
<tr>
<td colspan="2" style="border: 1px solid black; width: 200px; height: 100px; text-align: center;"> bottom center cell</td>
</tr>
</table>

You can see the bottom row of the table has only one cell that is spanned across 2 columns with the width attribute now set to 200px and a new attribute text-align which is simply saying align all text in the center of the cell.

top left cell top right cell
bottom center cell

Now we are going to get complicated and add many different attributes to each of the tags

<table style="width: 400px; height: 400px; padding: 0px;">
<tr>
<td style="border: 1px solid black; width: 100px; height: 100px;"> top left cell</td>
<td rowspan="2" style="border: 1px dotted black; width: 200px; height: 200px; text-align: center;"> spanned center cell</td>
<td style="border: 0px; width: 100px; height: 100px;"> top right cell</td>
</tr>
<tr>
<td style="border: 1px solid black; width: 100px; height: 100px;"> bottom left cell</td>
<td style="border: 1px dashed black; width: 100px; height: 100px;"> bottom right cell</td>
</tr>
</table>

top left cell spanned center cell top right cell
bottom left cell bottom right cell

This is why styles come in useful, instead of applying a class to each of the tags so you can put all your CSS in the head of the page you now have all the CSS in the body of your page in the tag itself. Which is less confusing sometimes.

Now I will show you how to add background colors and images to your tables and cells. You used to be able to use the code <td background="image.gif" background-color="red" ect but now CSS can do all that for us with valid coding.

To start we first need an image to be shown inside a cell, I think I will use this one Tables in XHTML But for now I will show you how to add background colors to the cells of your choice.

<table style="border: 1px solid black; width: 200px; height: 200px;
padding: 0px;">
<tr>
<td style="border: 1px solid black; width: 100px; height: 100px; background-color: #000000; color: #FFFFFF;">top left cell</td>
<td style="border: 1px solid black; width: 100px; height: 100px;"> top right cell</td>
</tr>
<tr>
<td style="border: 1px solid black; width: 100px; height: 100px;"> bottom left cell</td>
<td style="border: 1px solid black; width: 100px; height: 100px; background-color: red;">bottom right cell</td>
</tr>
</table>

Here you will see that there are 2 new attributes, background-color and color

background-color: sets the colour the background of the cell should be.

color: sets the color of the font in this cell

top left cell top right cell
bottom left cell bottom right cell

By looking at the example we have 2 cells with coloured backgrounds, lets give the other 2 background images.

<table style="border: 1px solid black; width: 200px; height: 200px;
padding: 0px;">
<tr>
<td style="border: 1px solid black; width: 100px; height: 100px; background-color: #000000; color: #FFFFFF;">top left cell</td>
<td style="border: 1px solid black; width: 100px; height: 100px; background-image: url(wink.gif);">top right cell</td>
</tr>
<tr>
<td style="border: 1px solid black; width: 100px; height: 100px; background-image: url(wink.gif);">bottom left cell</td>
<td style="border: 1px solid black; width: 100px; height: 100px; background-color: red;">bottom right cell</td>
</tr>
</table>

You can see we have filled the cells with this image by using the new attribute background-image:, you will also notice we have got in the value url (imagesrc.gif) - This just means the place where the image is located. But now what if we only want the image to appear once and for it to be centred.

top left cell top right cell
bottom left cell bottom right cell

<table style="border: 1px solid black; width: 200px; height: 200px;
padding: 0px;">
<tr>
<td style="border: 1px solid black; width: 200px; height: 200px; background-image: url(wink.gif); background-repeat: no-repeat; background-position: center;"> </td>
</tr>
</table>

In this example we have got 2 new attributes again:

background-repeat: - This dictates whether the image should be repeated throughout the cell or weather it should be repeated a certain way.

background-position: - This dictates the position of the image, weather the image should be aligned left / center or right.

 

And there you have it, hopefully this should be everything you need to know about table layouts and CSS table codes to enable you to go and make great layouts of your own, all with valid coding.

subscribe to newsletter