Table Tags

Table Tags

Tables can be used for formatting text into columns, displaying pictures in rows and columns or for displaying a real table.

Basic elements of Table Tags
<table>...</table>;	to start and end the table
<th> ... </th>	table header
<tr> ... </tr>	table row
<td> ... </td>	table data or cell definition
<caption> ... </caption>	table caption (optional)

basics of a table: Tables are made from rows and columns. The rows are defined with the <tr> as mentioned above. The number of columns is determined by the number of <td> tags following each row command.

<table align=center> <caption>example table</caption> <tr> <th>heading 1</th> <th>heading 2</th> <th>heading 3</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> </tr> </table>

example table
heading 1	heading 2	heading 3
data 1	data 2	data 3

OPTIONS: There are several options to change the look of a table. Some of these options (specifically bgcolor) are HTML 3.2 and might not show up on your browser if it is not a recent update. Netscape 3.0b4 does work on all the options discussed below.

border=#	changes the thickness of the line around the table
bgcolor=#	changes the background color of the table or cell
colspan=#	allows a cell to span # of columns
rowspan=#	allows a cell to span # of rows
width=#	changes the width of the table or a column
height=#	changes the height of the table or a row
cellspacing=#	adds thickness to the space between the cells
cellpadding=#	adds whitespace between the cell data and the border
align=#	horizontally aligns the text either left, center, or right
align=#	aligns the caption either top or bottom
valign=#	vertically aligns the text either top, middle, bottom, baseline

border [other options]: Tables are often used without the knowledge of the reader. Most of this tutorial is split up on the left and right sides with examples and display of example. The table itself is not shown because the border around the table is not displayed. To display a border you need to add the border=# descriptor to the table start tag. Where the # refers to the thickness in pixels.

<table border=5> <tr> <td> <h2>TABLE CELL</h2> </td> </tr> </table>

TABLE CELL

background color [other options]: You can change the color that is the background for the table. Tables may be nested and this tutorial does use nested backgrounds. So in this example the nested table should have a red background. To change the background color of a table, you need t o add the bgcolor=# descriptor to the table start tag. You may also change the background color of a cell by adding a bgcolor=# descriptor to the <th> or <td> tags.

<table border=5 bgcolor=ff0000> <tr> <td> <h2>TABLE CELL</h2> </td> </tr> </table>

TABLE CELL

column span [other options]: There will be times that you need a data to span two or more columns. To accomplish this use the colspan=# command within the th or td tags.

<table border=1> <tr> <th colspan=4 bgcolor=00ff00>heading</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td bgcolor=ff0000>4</td> </tr> <tr> <td colspan=3>under 123</td> <td colspan=2>under 4 </td> </tr> </table>

heading
1	2	3	4
under 123			under 4

row span [other options]: Similarly, there may be instances that you need a data to span two or more rows. To accomplish this use the rowspan=# command within the th or td tags.

<table border=1> <tr><th rowspan=3>heading</th> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </tr> </table>

heading
	1	2	3
	4	5	6

width [other options]: Sometimes it is necessary to specify the width of either an entire table or just a column. If you have several tables within one HTML document, it would probably look a little tacky if they were all different widths. To gain a more uniformed look, you could use the width=# descriptor to change either the table or the cell data tags.

A	B	C
1	2	3

: A width=# tag within the table tag will set the table width to the specified # of pixels. The column widths are not necessarily evenly distributed.

A	B	C
Now is the time	2	3

height [other options]: A height=# tag within the table tag will set the table width to the specified #. The row heights are not necessarily evenly distributed.

A	B	C
1	2	3

cellspacing [other options]: Cell spacing creates additional space between each of the cell blocks. This could help separate larger tables where the columns and rows tend to blend together as you try to follow a line across the screen. The cellspacing=# command should be included with the initial <table> tag.

<table border=1 cellspacing=8> <tr> <th>head 1</th> <th>head 2</th> <th>head 3</th> </tr> <tr> <td>one</td> <td>two</td> <td>three</td> </tr> </table>

head 1	head 2	head 3
one	two	three

cellpadding [other options]: Cell padding creates additional space between the data and the cell borders. The cellpadding=# command should be included with the initial <table> tag.

<table border=1 cellpadding=8> <tr> <th>head 1</th> <th>head 2</th> <th>head 3</th> </tr> <tr> <td>one</td> <td>two</td> <td>three</td> </tr> </table>

head 1	head 2	head 3
one	two	three

horizontal alignment of text [other options]: Within each cell you may choose to align the text differently. To horizontally align the text, the align=# command must reside within the tr, th, or td tags.

The three current options are left, center, and right.

<table border=1 width=250> <tr align=middle> <th>head 1</th> <th>head 2</th> <th>head 3</th> </tr> <tr> <td align=left>one</td> <td align=center>two</td> <td align=right>three</td> </tr> </table>

head 1	head 2	head 3
one	two	three

align with captions [other options]: The align tag can also be used with the caption tag. The default is top with the other option being bottom.

example table
heading 1	heading 2	heading 3
data 1	data 2	data 3

example table
heading 1	heading 2	heading 3
data 1	data 2	data 3

vertical alignment of text [other options]: Within each cell you may choose to align the text differently. To vertically align the text the align=# command must reside within the tr, th, or td tags. The four current options are top, middle, bottom, and baseline.

<table border=1 height=150> <tr> <th>head 1</th> <th>head 2</th> <th>head 3</th> <th>head 4</th> </tr> <tr> <td valign=top>one</td> <td valign=middle>two</td> <td valign=bottom>three</td> <td valign=baseline>four</td> </tr> </table>

head 1	head 2	head 3	head 4
one	two	three	four

last modified December 20, 2011 43370