Setting the width and height of the table, rows and cells
Setting the alignment of the table and cells
Making a table cell span more than one row
Making a table cell span more than one column
Previously we looked at the parts that make up a table - rows, columns and cells. We saw how to make a table, and
how to make a cell span more than one row or column. Now let's see how we can alter the appearance of a table.
One of the most important features of tables is the ability HTML gives us to specify the size (width and/or height) of the
table, rows and cells. We can do this using the
width attributes of the
<tr> tags. When you're using these
attributes, you can express the size either in pixels (e.g.
or as a percentage (e.g.
For example, we might want a table that spanned the entire width of the window, no matter what the resolution of the
monitor it was being viewed on. That being the case, we could create a table 100% wide, like this (I've set
the border to 1, so you can see it better-
....which you can see for yourself here.
<title>A 100% width table</title>
<table width="100%" border="1">
I am a one cell, one row table, 100% wide. If you re-size the window, you'll see I'm always 100% wide!
If you were to set the width of one cell, in one row, any cells in the same column will adopt that width too. For example, if
we were to use this code -
- then it would look like this. That is, even though we've set the
<td width="100">Cell 1, Row 1</td>
<td width="100">Cell 2, Row 1</td>
<td width="200">Cell 1, Row 2</td>
<td width="200">Cell 2, Row 2</td>
width attribute in the second row to 200, it adopts the size of the cells above it (i.e. 100).
height attribute works in the same way - you can use either a pixel amount or a percentage.
However, the height of the row/s below the first one is not inherited like it is with the width. However, the height
of all the cells in that row will inherit that height.
For example, code like this -
- would appear like this.
<td height="200">Cell 1, Row 1</td>
<td height="200">Cell 2, Row 1</td>
<td>Cell 1, Row 2</td>
<td>Cell 2, Row 2</td>
You can of course use both the
width attributes together, for example -
<tr width="200" height="150">
Now that we've seen how to control the size of the table and it's components, let's see how we can control the
layout, using the
valign attributes. We can use both these attributes within a
<td> tag to affect how the cell's content appears.
align controls the horizontal alignment
of the cells content. This can have a value of either left, right, or center. If you don't include this
attribute, it will align left as default. For example, to center the contents of a cell, you'd use the code -
valign affects the vertical alignment of the cell's content. You can choose a value of top,
middle, bottom or baseline. These should be pretty much self-explanatory, apart from baseline.
This value means that the baseline of the text in the cell will align with the text in the other cells in that row.
For example, to align the cell's content at the top of the cell, we'd use the code -
To see how different settings of both the
valign attributes look, have a look at
The tables we've looked at so far are fine, but what if we'd like a table that looked a little more irregular, like this? -
|I span two rows!
||I span one row.
|I span one row.
To achieve this, we need to make one cell span more than one row. In the example above, it's spanning
two rows, but it can span as many rows as you like/need. To achieve this, we use the
rowspan attribute of
<td> tag, and then make the value however many rows we'd like it to span. So, if we'd like a cell
to span three rows, we'd simply use the code
Don't forget that if you make a cell span more than one row, you need one less cell in the row below it, because
the cell in the row above has already 'taken its place'.
You can see another visual example of this attribute here.
We can use a similar attribute to make a cell span more than one column, that is to increase the amount it spans
horizontally. We do this using the
colspan attribute of the
<td> tag in exactly
the same way we did with
rowspan, that is, we set a value which is the number of columns we'd like the cell
So, supposing we'd like the cell to span 4 columns, we'd use the code
To see this attribute in action, take a look at this example.
In the next section, we'll see how we can change the background, background color, border
and border color of our tables, and see how we can handle empty cells.
Top of page -
Back to Tables (Part One) -
Next - Tables (Part Three)