Tables in HTML
Basics for creating a table
Tables consists of three tags to work. To keep track of your table, especially when you make the first tables, it is a big help to think of it as layers.
The outer tag is <TABLE>, stating than here comes a table. The code is:
The next thing to write are the rows. There is no tag for columns, so you work in rows, that are divided into cells. The tag for rows is <TR> (table row), so if we add three rows to our table, it now becomes
The cells in the table are done by dividing the rows with the tag <TD> (table data). A row with three cells will look like this:
If you arrange it in one line, and place it in the table from before, you get at table with 3x3 cells:
The table, as it looks right now, you can't see unless you add some content. If we add the numbers 1 to 9 in the nine cells, it looks like this:
The table has no visible cell borders, and the size of the cells are adjusted to the content. Normally you need some styling, before the table really becomes useful, so let's style it a little.
The outer tag is <TABLE>, stating than here comes a table. The code is:
<TABLE>
</TABLE>
</TABLE>
The next thing to write are the rows. There is no tag for columns, so you work in rows, that are divided into cells. The tag for rows is <TR> (table row), so if we add three rows to our table, it now becomes
<TABLE>
<TR> </TR>
<TR> </TR>
<TR> </TR>
</TABLE>
<TR> </TR>
<TR> </TR>
<TR> </TR>
</TABLE>
The cells in the table are done by dividing the rows with the tag <TD> (table data). A row with three cells will look like this:
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
If you arrange it in one line, and place it in the table from before, you get at table with 3x3 cells:
<TABLE>
<TR> <TD> </TD> <TD> </TD> <TD> </TD> </TR>
<TR> <TD> </TD> <TD> </TD> <TD> </TD> </TR>
<TR> <TD> </TD> <TD> </TD> <TD> </TD> </TR>
</TABLE>
<TR> <TD> </TD> <TD> </TD> <TD> </TD> </TR>
<TR> <TD> </TD> <TD> </TD> <TD> </TD> </TR>
<TR> <TD> </TD> <TD> </TD> <TD> </TD> </TR>
</TABLE>
The table, as it looks right now, you can't see unless you add some content. If we add the numbers 1 to 9 in the nine cells, it looks like this:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
The table has no visible cell borders, and the size of the cells are adjusted to the content. Normally you need some styling, before the table really becomes useful, so let's style it a little.
Styling of the table
By styling your table a bit, you can get a lot of beneficial effects, making the page more readable.
Cell borders
The first thing, which is nice to have on your table, is borders. This is done by styling the individual cells, i.e. <TD>. Minimum requirement is specifying how the border style, e.g. do you want a solid line or a dotted line or something else? Also you have to specify the width of the border. A solid line, 1 px wide, looks like this:
On the table, this gives the following effect:
As seen, the cells are not together. For some reason, this is standard on most of the newer browsers. If you want the cells to be together, which is the most common look, this is done using STYLE="border-collapse:collapse". Before HTML 5 you could also use CELLSPACING. In practice CELLSPACING still works in HTML 5, but the recommendation is not to use it. If you need a table with distance between the cells, it has to be done using border-collapse:separate and a distance specified with border-spacing.
Note: As there apparently is no consensus about the default value for border-collapse, and can't expect there ever will be one, you always have to specify this value for the tables.
A relic from the old days, is the attribute BORDER for the TABLE tag. With this you can set all borders to the same width. Don't use that attribute, ever. The various browsers have different interpretations, and every time you make an adjustment somewhere, to compensate for the differences, it ruins something else in another part of the code.
For a table like the one we just did, where the cells are together by using border-collapse, the TABLE tag is done like this:
And the table looks like this:
On the other hand, if you want a 5px cell distance, the TABLE tag looks like this:
And the table looks like this:
Black is the default color. If you want another color, you have to specify this as well. The code for our table, with all the styles, can look confusing, and under normal circumstances you would use a workaround in the form of a stylesheets to keep the code easy to follow. Here we stick with the full code, to make it possible to see which code provides which effect.
Often, when making a table, the first row is used for headlines, and you want a thicker line, e.g. 3px, between first and second row. The style border-width is for all four sides of the cell, and can be split up in border-top, border-bottom, border-left, and border-right. There is two ways to solve the problem here. You can be specific, writing border-top:1px, border-bottom:3px, border-left:1px and border-right:1px or continue using border-width, where you write border-width:1px 1px 3px 1px. Being explicit for all four borders is best when you are only specifying one or two sides. All sides, as we are doing here, then border-width is the most convenient solution. Using border-width you have to remember all four sides, otherwise there will be troubles reading the code the right way.
The code for the cells in the first row now looks like this:
The code in the remaining cells look as they did before. The table, after the change, looks like this:
Cell width and height
When making a table, it will automatically adjust its size according to the longest text string. If the cell content exceeds the width of the screen, the cells will adjust width and height according to the content of the various cells. This however is rarely the look you want. To get something nice and readable to look at, you therefore give the cells a fixed width. Several ways of doing this can be found, and not all of them are good. This is one of the ways of doing it that works well:
The first thing to do is specifying the width of the entire table. This is done in the TABLE tag. If you want a total width of 400 pixels you can either use the attribute WIDTH, where the syntax is WIDTH="400", or you can use the attribute STYLE, where the syntax is STYLE="width:400px". The general recommendation is using STYLE for HTML 5, but for the time being, the use of one or the other attribute is a matter of personal taste. For the example we use STYLE, and the result looks like this.
Next thing you do, is specifying the size of the cells. Here the trick is, not to specify a width on one of the columns. If you have specified the width of the table and two of the columns, the width of last column will be what is left of the width of the table. For simple tables it doesn't really matter if you do it this way or specify the width for all three columns. What you have to be careful about, is the widths being specified not clashing with each other, e.g. the width of the table being larger than the sum of the three columns. If you have to do something a bit more advanced like merging cells, as shown in the next section, a column with an unspecified width is a trick that save you from a lot of aggravations.
Now we apply STYLE="width:100px" to the two last columns. Then the table looks like this:
Cell height is, like the width, defined by the content. If you want another height, the procedure follows the same principles as width, you just write HEIGHT instead of WIDTH. A 30px height is thus HEIGHT="30" or STYLE-attributten som STYLE="height:30px", and like width, the general recommendation is to use STYLE instead of the attribute HEIGHT. The height can be applied on both the TR and the TD tag. A useful trick is to apply the height to the TR tag. Intuitively height pertains the entire row, i.e. the TR tag, and you keep the TD tag simpler. The result, here with STYLE="height:30px" on the TR tag, looks like this:
Merging cells
In tables, you often need to merge cells, both horizontally and vertically. In HTML you have to be aware that many browsers have some limitations that requires a bit of creative ingenuity.
Horizontal merging of cells is done by removing the cells to be merged, except one. In the remaining cell, using the attribute COLSPAN, you specify the number of cells to merge, i.e. COLSPAN="2" at 2 cells. If we try merging the two cells containing tre numbers 5 and 6, the basic code for the table, without all the formatting, looks like this.
On the table we have worked on, it looks like this:
Horizontal merging of cells is done by removing the cells to be merged except the cell at the top, and in the remaining cell, you specify the number of cell to be merged, using the attribute ROWSPAN, i.e. ROWSPAN="2" for 2 cells. If we try merging the cells containing the numbers 4 and 7, the basic code for the table from before, looks like this.
On the table we have worked on, it looks like this:
Placing the text in the cells
One of the things making a table hard to read, is when the text is too close to the borders. It seems cramped and in large tables, the lines start getting blurry, when reading the content. This is solved using padding. There is two ways of doing this, the attribute CELLPADDING and STYLE="padding: ". CELLPADDING is a relic from the old days, and while it still works under HTML 5, it is one of the attributes you can expect to be discontinued, because the effect can be done using STYLE, and with STYLE you have far better control of your padding. A teble using STYLE="padding:5px" on all cells (all TD tag) looks like this:
On the first row, the padding on the top and bottom cannot be seen, due to the height being 30px, so here the result is that the three rows looks like they have the same height. Here you would normally change the height, e.g. to 45px, to recreate the difference in height between the first row and the rest of the table.
If you need more specific styling, you specify it on the individual cells. Here you can, similar to border width, specify the four sides STYLE="padding:5px 0px 5px 5px". If you prefer having explicit sides, or you just need to change padding e.g. on the left side, padding as STYLE can also be written as padding-left, padding-right, padding-top, padding-bottom.
The three tags for tables work like tags for text sections. Therefore you can have right aligned, left aligned and centered text by specifying it in STYLE. In the same way, you can specify the vertical placement. In STYLE you can set vertical-align to top, center and bottom. Default is center, as seen on the table we have made.
Cell borders
The first thing, which is nice to have on your table, is borders. This is done by styling the individual cells, i.e. <TD>. Minimum requirement is specifying how the border style, e.g. do you want a solid line or a dotted line or something else? Also you have to specify the width of the border. A solid line, 1 px wide, looks like this:
<TD STYLE="border-style:solid; border-width:1px;">
On the table, this gives the following effect:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
As seen, the cells are not together. For some reason, this is standard on most of the newer browsers. If you want the cells to be together, which is the most common look, this is done using STYLE="border-collapse:collapse". Before HTML 5 you could also use CELLSPACING. In practice CELLSPACING still works in HTML 5, but the recommendation is not to use it. If you need a table with distance between the cells, it has to be done using border-collapse:separate and a distance specified with border-spacing.
Note: As there apparently is no consensus about the default value for border-collapse, and can't expect there ever will be one, you always have to specify this value for the tables.
A relic from the old days, is the attribute BORDER for the TABLE tag. With this you can set all borders to the same width. Don't use that attribute, ever. The various browsers have different interpretations, and every time you make an adjustment somewhere, to compensate for the differences, it ruins something else in another part of the code.
For a table like the one we just did, where the cells are together by using border-collapse, the TABLE tag is done like this:
<TABLE STYLE="border-collapse:collapse">
And the table looks like this:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
On the other hand, if you want a 5px cell distance, the TABLE tag looks like this:
<TABLE STYLE="border-collapse:separate; border-spacing:5px">
And the table looks like this:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Black is the default color. If you want another color, you have to specify this as well. The code for our table, with all the styles, can look confusing, and under normal circumstances you would use a workaround in the form of a stylesheets to keep the code easy to follow. Here we stick with the full code, to make it possible to see which code provides which effect.
Often, when making a table, the first row is used for headlines, and you want a thicker line, e.g. 3px, between first and second row. The style border-width is for all four sides of the cell, and can be split up in border-top, border-bottom, border-left, and border-right. There is two ways to solve the problem here. You can be specific, writing border-top:1px, border-bottom:3px, border-left:1px and border-right:1px or continue using border-width, where you write border-width:1px 1px 3px 1px. Being explicit for all four borders is best when you are only specifying one or two sides. All sides, as we are doing here, then border-width is the most convenient solution. Using border-width you have to remember all four sides, otherwise there will be troubles reading the code the right way.
The code for the cells in the first row now looks like this:
<TD STYLE="border-style:solid; border-width:1px 1px 3px 1px">
The code in the remaining cells look as they did before. The table, after the change, looks like this:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Cell width and height
When making a table, it will automatically adjust its size according to the longest text string. If the cell content exceeds the width of the screen, the cells will adjust width and height according to the content of the various cells. This however is rarely the look you want. To get something nice and readable to look at, you therefore give the cells a fixed width. Several ways of doing this can be found, and not all of them are good. This is one of the ways of doing it that works well:
The first thing to do is specifying the width of the entire table. This is done in the TABLE tag. If you want a total width of 400 pixels you can either use the attribute WIDTH, where the syntax is WIDTH="400", or you can use the attribute STYLE, where the syntax is STYLE="width:400px". The general recommendation is using STYLE for HTML 5, but for the time being, the use of one or the other attribute is a matter of personal taste. For the example we use STYLE, and the result looks like this.
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Next thing you do, is specifying the size of the cells. Here the trick is, not to specify a width on one of the columns. If you have specified the width of the table and two of the columns, the width of last column will be what is left of the width of the table. For simple tables it doesn't really matter if you do it this way or specify the width for all three columns. What you have to be careful about, is the widths being specified not clashing with each other, e.g. the width of the table being larger than the sum of the three columns. If you have to do something a bit more advanced like merging cells, as shown in the next section, a column with an unspecified width is a trick that save you from a lot of aggravations.
Now we apply STYLE="width:100px" to the two last columns. Then the table looks like this:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Cell height is, like the width, defined by the content. If you want another height, the procedure follows the same principles as width, you just write HEIGHT instead of WIDTH. A 30px height is thus HEIGHT="30" or STYLE-attributten som STYLE="height:30px", and like width, the general recommendation is to use STYLE instead of the attribute HEIGHT. The height can be applied on both the TR and the TD tag. A useful trick is to apply the height to the TR tag. Intuitively height pertains the entire row, i.e. the TR tag, and you keep the TD tag simpler. The result, here with STYLE="height:30px" on the TR tag, looks like this:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Merging cells
In tables, you often need to merge cells, both horizontally and vertically. In HTML you have to be aware that many browsers have some limitations that requires a bit of creative ingenuity.
Horizontal merging of cells is done by removing the cells to be merged, except one. In the remaining cell, using the attribute COLSPAN, you specify the number of cells to merge, i.e. COLSPAN="2" at 2 cells. If we try merging the two cells containing tre numbers 5 and 6, the basic code for the table, without all the formatting, looks like this.
<TABLE>
<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR>
<TR> <TD>4</TD> <TD COLSPAN="2">5 6</TD> </TR>
<TR> <TD>7</TD> <TD>8</TD> <TD>9</TD> </TR>
</TABLE>
<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR>
<TR> <TD>4</TD> <TD COLSPAN="2">5 6</TD> </TR>
<TR> <TD>7</TD> <TD>8</TD> <TD>9</TD> </TR>
</TABLE>
On the table we have worked on, it looks like this:
| 1 | 2 | 3 |
| 4 | 5 6 | |
| 7 | 8 | 9 |
Notice the following limitations
If you merge cells in the first row, the tables have a habit of not complying with the widths specified in the rows below. There is no explanation why the browsers ignore the settings of cell width, and it doesn't happen all the time, and the effect changes depending on the browser. The way to get around this limitation is by splitting up your table in two. One for handling the first row and one for handling the rest.
If you merge cells in the first row, the tables have a habit of not complying with the widths specified in the rows below. There is no explanation why the browsers ignore the settings of cell width, and it doesn't happen all the time, and the effect changes depending on the browser. The way to get around this limitation is by splitting up your table in two. One for handling the first row and one for handling the rest.
Horizontal merging of cells is done by removing the cells to be merged except the cell at the top, and in the remaining cell, you specify the number of cell to be merged, using the attribute ROWSPAN, i.e. ROWSPAN="2" for 2 cells. If we try merging the cells containing the numbers 4 and 7, the basic code for the table from before, looks like this.
<TABLE>
<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR>
<TR> <TD ROWSPAN="2">4 7</TD> <TD COLSPAN="2">5 6</TD> </TR>
<TR> <TD>8</TD> <TD>9</TD> </TR>
</TABLE>
<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR>
<TR> <TD ROWSPAN="2">4 7</TD> <TD COLSPAN="2">5 6</TD> </TR>
<TR> <TD>8</TD> <TD>9</TD> </TR>
</TABLE>
On the table we have worked on, it looks like this:
| 1 | 2 | 3 |
| 4 7 | 5 6 | |
| 8 | 9 | |
Placing the text in the cells
One of the things making a table hard to read, is when the text is too close to the borders. It seems cramped and in large tables, the lines start getting blurry, when reading the content. This is solved using padding. There is two ways of doing this, the attribute CELLPADDING and STYLE="padding: ". CELLPADDING is a relic from the old days, and while it still works under HTML 5, it is one of the attributes you can expect to be discontinued, because the effect can be done using STYLE, and with STYLE you have far better control of your padding. A teble using STYLE="padding:5px" on all cells (all TD tag) looks like this:
| 1 | 2 | 3 |
| 4 7 | 5 6 | |
| 8 | 9 | |
On the first row, the padding on the top and bottom cannot be seen, due to the height being 30px, so here the result is that the three rows looks like they have the same height. Here you would normally change the height, e.g. to 45px, to recreate the difference in height between the first row and the rest of the table.
If you need more specific styling, you specify it on the individual cells. Here you can, similar to border width, specify the four sides STYLE="padding:5px 0px 5px 5px". If you prefer having explicit sides, or you just need to change padding e.g. on the left side, padding as STYLE can also be written as padding-left, padding-right, padding-top, padding-bottom.
The three tags for tables work like tags for text sections. Therefore you can have right aligned, left aligned and centered text by specifying it in STYLE. In the same way, you can specify the vertical placement. In STYLE you can set vertical-align to top, center and bottom. Default is center, as seen on the table we have made.
Special tags for dividing the table into sections
For assistance in styling the tables, you have tags for dividing the table in sections. You have table header, <THEAD>, table body, <TBODY>, and table footer, <TFOOT>.
Offhand they offer no advantage compared to making a class for the <TR> tag, so under normal circumstances, it is a matter of personal preferences whether you want to control the styling using a class or a tag. If you have rally large tables, where you want to lock header and footer and be able to scroll the table data, the use of <TBODY STYLE="height:(desired height); overflow:auto;"> is an effective way if doing this.
There is one place, where the three tags are essential: If you want to create a table using JavaScript and you are using createElement. Several browsers can't create a table properly with JavaScript, if you don't have document.createElement('TBODY') (or THEAD/TFOOT depending on structure) between document.createElement('TABLE') and document.createElement('TR'). There is no good explanation for this, and apparently not all browsers have this problem.
Offhand they offer no advantage compared to making a class for the <TR> tag, so under normal circumstances, it is a matter of personal preferences whether you want to control the styling using a class or a tag. If you have rally large tables, where you want to lock header and footer and be able to scroll the table data, the use of <TBODY STYLE="height:(desired height); overflow:auto;"> is an effective way if doing this.
There is one place, where the three tags are essential: If you want to create a table using JavaScript and you are using createElement. Several browsers can't create a table properly with JavaScript, if you don't have document.createElement('TBODY') (or THEAD/TFOOT depending on structure) between document.createElement('TABLE') and document.createElement('TR'). There is no good explanation for this, and apparently not all browsers have this problem.