Most HTML tables have the form:
<TABLE>
<TR><TH>Column1
Heading</TH><TH>Column2
Heading</TH><TH>Column3
Heading</TH></TR>
<TR><TD>R1C1
Data</TD><TD>R1C2
Data</TD><TD>R1C3
Data</TD></TR>
<TR><TD>R2C1 Data</TD><TD>R2C2
Data</TD><TD>R2C3
Data</TD></TR>
<TR><TD>R3C1 Data</TD><TD>R3C2
Data</TD><TD>R3C3
Data</TD></TR>
...
</TABLE>
The <TABLE> and </TABLE> tags defines the start and the end of a table.
The <TR> and <TD> tags defines table row and table data. Besides, <TH> can also be used to define table header.
Click here to review how the following document appears in a Web browser.
| <HTML> <HEAD> <TITLE>Enter the Page Title Here</TITLE> </HEAD> <BODY> 5x5 Multiplication Table <TABLE> <TR><TH>Product</TH><TH>1</TH><TH>2</TH><TH>3</TH><TH>4</TH><TH>5</TH></TR> <TR><TH>1</TH><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD><TD>5</TD></TR> <TR><TH>2</TH><TD>2</TD><TD>4</TD><TD>6</TD><TD>8</TD><TD>10</TD></TR> <TR><TH>3</TH><TD>3</TD><TD>6</TD><TD>9</TD><TD>12</TD><TD>15</TD></TR> <TR><TH>4</TH><TD>4</TD><TD>8</TD><TD>12</TD><TD>16</TD><TD>20</TD></TR> <TR><TH>5</TH><TD>5</TD><TD>10</TD><TD>15</TD><TD>20</TD><TD>25</TD></TR> </TABLE> </BODY> </HTML> |
Note that by default, the width of each column is determined by the width of the widest element in the column.
The <CAPTION> and </CAPTION> tags add a caption to the table.
The align attribute of the <CAPTION> tag may be assigned a value such as top or bottom, which determines where the caption is placed with related to the table.
Click here to review how the following document appears in a Web browser.
| <HTML> <HEAD> <TITLE>Enter the Page Title Here</TITLE> </HEAD> <BODY> <TABLE> <CAPTION align="bottom"><I>5x5 Multiplication Table</I></CAPTION> <TR><TH>Product</TH><TH>1</TH><TH>2</TH><TH>3</TH><TH>4</TH><TH>5</TH></TR> <TR><TH>1</TH><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD><TD>5</TD></TR> <TR><TH>2</TH><TD>2</TD><TD>4</TD><TD>6</TD><TD>8</TD><TD>10</TD></TR> <TR><TH>3</TH><TD>3</TD><TD>6</TD><TD>9</TD><TD>12</TD><TD>15</TD></TR> <TR><TH>4</TH><TD>4</TD><TD>8</TD><TD>12</TD><TD>16</TD><TD>20</TD></TR> <TR><TH>5</TH><TD>5</TD><TD>10</TD><TD>15</TD><TD>20</TD><TD>25</TD></TR> </TABLE> </BODY> </HTML> |
Note that the caption is center-aligned by default. Besides, the caption will be placed at the top of the table by default if the align attribute is ignored.
The following table summarizes some of the commonly used attributes of the <TABLE> tag:
| Attribute |
Description |
Value |
align |
Determines where the table appears relative to
the browser window. |
left, center,
right |
border |
Defines the width of the border surrounding the
table. Default value = 1 |
in pixel(s) |
width |
Sets the relative or absolute width of the table
in the browser window. |
in % or in pixel(s) |
col |
Specifies the number of columns in a table, which
results in faster rendering. |
integer |
cellspacing |
Specifies how much space is between the cells
of the table. |
in pixel(s) |
cellpadding |
Specifies how much space is between a cell wall
and the contents of the cell. |
in pixel(s) |
Click here to review how the following document appears in a Web browser.
| <HTML> <HEAD> <TITLE>Enter the Page Title Here</TITLE> </HEAD> <BODY> <TABLE align="center" width="75%" border="4" cellspacing="2" cellpadding="2"> <CAPTION align="bottom"><I>5x5 Multiplication Table</I></CAPTION> <TR><TH>Product</TH><TH>1</TH><TH>2</TH><TH>3</TH><TH>4</TH><TH>5</TH></TR> <TR><TH>1</TH><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD><TD>5</TD></TR> <TR><TH>2</TH><TD>2</TD><TD>4</TD><TD>6</TD><TD>8</TD><TD>10</TD></TR> <TR><TH>3</TH><TD>3</TD><TD>6</TD><TD>9</TD><TD>12</TD><TD>15</TD></TR> <TR><TH>4</TH><TD>4</TD><TD>8</TD><TD>12</TD><TD>16</TD><TD>20</TD></TR> <TR><TH>5</TH><TD>5</TD><TD>10</TD><TD>15</TD><TD>20</TD><TD>25</TD></TR> </TABLE> </BODY> </HTML> |
The <TR> tag may use the align attribute to determine how data will appear horizontally in each row.
The value of align can be left, center, or right.
Click here to review how the following document appears in a Web browser.
| <HTML> <HEAD> <TITLE>Enter the Page Title Here</TITLE> </HEAD> <BODY> <TABLE align="center" width="75%" border="4" cellspacing="2" cellpadding="2"> <CAPTION align="bottom"><I>5x5 Multiplication Table</I></CAPTION> <TR align="center"> <TH>Product</TH><TH>1</TH><TH>2</TH><TH>3</TH><TH>4</TH><TH>5</TH> </TR> <TR align="center"> <TH>1</TH><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD><TD>5</TD> </TR> <TR align="center"> <TH>2</TH><TD>2</TD><TD>4</TD><TD>6</TD><TD>8</TD><TD>10</TD> </TR> <TR align="center"> <TH>3</TH><TD>3</TD><TD>6</TD><TD>9</TD><TD>12</TD><TD>15</TD> </TR> <TR align="center"> <TH>4</TH><TD>4</TD><TD>8</TD><TD>12</TD><TD>16</TD><TD>20</TD> </TR> <TR align="center"> <TH>5</TH><TD>5</TD><TD>10</TD><TD>15</TD><TD>20</TD><TD>25</TD> </TR> </TABLE> </BODY> </HTML> |
Both <TH> and <TD> can take two attributes: align and valign.
The following table summarizes the two attributes of the <TH> and <TD> tags:
| Attribute |
Description |
Value |
align |
Aligns the data within the cell horizontally |
left, center,
right |
valign |
Aligns data vertically within cells |
top, center,
bottom |
Note that both the align and valign attributes can be used in a particular cell definition to override the alignment set by that cell's row tag.
The bgcolor attribute accepts a color name (e.g., red, yellow, blue), or a hexadecimal representation, and works with the <TABLE>, <TR>, and <TD> tags. (See Background Image and Background Color)
Click here to review how the following document appears in a Web browser.
| <HTML> <HEAD> <TITLE>Enter the Page Title Here</TITLE> </HEAD> <BODY> <TABLE align="center" width="75%" border="4" cellspacing="2" cellpadding="2"> <CAPTION align="bottom"><I>5x5 Multiplication Table</I></CAPTION> <TR align="center"> <TH>Product</TH><TH>1</TH><TH>2</TH><TH>3</TH><TH>4</TH><TH>5</TH> </TR> <TR align="center" bgcolor="red"> <TH>1</TH><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD><TD>5</TD> </TR> <TR align="center" bgcolor="yellow"> <TH>2</TH><TD>2</TD><TD>4</TD><TD>6</TD><TD>8</TD><TD>10</TD> </TR> <TR align="center" bgcolor="red"> <TH>3</TH><TD>3</TD><TD>6</TD><TD>9</TD><TD>12</TD><TD>15</TD> </TR> <TR align="center" bgcolor="yellow"> <TH>4</TH><TD>4</TD><TD>8</TD><TD>12</TD><TD>16</TD><TD>20</TD> </TR> <TR align="center" bgcolor="red"> <TH>5</TH><TD>5</TD><TD>10</TD><TD>15</TD><TD>20</TD><TD>25</TD> </TR> </TABLE> </BODY> </HTML> |
The two attributes: colspan and rowspan force a cell to span more than one column or row, respectively.
These two attributes work both for the <TH> and <TD> tags.
Click here to review how the following document appears in a Web browser.
| <HTML> <HEAD> <TITLE>Enter the Page Title Here</TITLE> </HEAD> <BODY> <TABLE width="75%" border="1" align="center"> <TR><TH>Student</TH><TH>Test 1</TH><TH>Test 2</TH><TH>Test 3</TH></TR> <TR align="center"> <TD>Bob</TD><TD>100</TD><TD>78</TD><TD rowspan="3">Cancelled</TD> </TR> <TR align="center"> <TD>Mary</TD><TD>72</TD><TD>60</TD> </TR> <TR align="center"> <TD>Peter</TD><TD colspan="2">Left School</TD> </TR> </TABLE> </BODY> </HTML> |
