Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square Moving On
square Backgrounds
Square Images
Square Links
Square Lists
Square Tables (Part One)
Square Tables (Part Two)
Square Tables (Part Three)
 
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.

Setting the width and height of the table and cells

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 height and/or width attributes of the <table>, <td> and <tr> tags. When you're using these attributes, you can express the size either in pixels (e.g. <tr width="200">), or as a percentage (e.g. <td width="100%">).
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-
<html>
<head>
<title>A 100% width table</title>
</head>
<body>
<table width="100%" border="1">
<tr>
<td>
I am a one cell, one row table, 100% wide. If you re-size the window, you'll see I'm always 100% wide!
</td>
</tr>
</table>
</body>
</html>
....which you can see for yourself here.
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 -
<table border="1">
<tr>
<td width="100">Cell 1, Row 1</td>
<td width="100">Cell 2, Row 1</td>
</tr>
<tr>
<td width="200">Cell 1, Row 2</td>
<td width="200">Cell 2, Row 2</td>
</tr>
</table>
- then it would look like this. That is, even though we've set the width attribute in the second row to 200, it adopts the size of the cells above it (i.e. 100).
The 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 -
<html>
<head>
<title>Height example</title>
</head>
<body>
<table border="1">
<tr>
<td height="200">Cell 1, Row 1</td>
<td height="200">Cell 2, Row 1</td>
</tr>
<tr>
<td>Cell 1, Row 2</td>
<td>Cell 2, Row 2</td>
</tr>
</table>
</body>
</html>
- would appear like this.
You can of course use both the height and width attributes together, for example -
<tr width="200" height="150">

Setting the alignment of the table and cells

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 align and 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 -
<td align="center">
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 -
<td valign="top">
To see how different settings of both the align and valign attributes look, have a look at this example.

Making a table cell span more than one row

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 the <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
<td colspan="3">
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.

Making a table cell span more than one column

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 to span/occupy.
So, supposing we'd like the cell to span 4 columns, we'd use the code
<td colspan="4">
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.

TopTop of page - BackBack to Tables (Part One) - Next - Tables (Part Three)Next

Introduction - The Basics - Moving On - Advanced - Glossary - Reference