Advanced Topics

Tables

Table Elements

HTML tables are a set of nested elements, Each table starts with the <table></table> elements. This block contains parts that define rows, columns, and headers

Table <table>

A page can have multiple tables. Each is defined inside of a <table></table> block

Table Row <tr>

The row is the fundamental elements of a table. Rows display data across teh table from left to right

Example:

html

<!DOCTYPE html>
<html>
 <body>
    <table>
       <tr>
       </tr>
       <tr>
       </tr>
       <tr>
       </tr>
    </table>
 </body>
</html>

css

table, tr {
  border: 1px solid black;
}

The browser will not display anything because there are no items inside each <tr></tr> block

Table Header <th>

The table header is the first row across the top if the table. It provides a description of the data below in in each column. The browser and CSS can format data in the <th></th> block to make it stand out

Example:

html

<!DOCTYPE html>
<html>
 <body>
    <table>
       <tr>
         <th>Column 1 header</th>
         <th>Column 2 header</th>
         <th>Column 3 header</th>
       </tr>
       <tr>
       </tr>
       <tr>
       </tr>
    </table>
 </body>
</html>

css

table, tr {
  border: 1px solid black;
}

Below is what how it will appear in a browser

Column 1 header Column 2 header Column 3 header

The first row of the table now shows the header for each column

Table Data <td>

Table data is the information that is to be displays in each cell (row/column) of the table

Example:

html

<!DOCTYPE html>
<html>
 <body>
    <table>
       <tr>
         <th>Column 1 header</th>
         <th>Column 2 header</th>
         <th>Column 3 header</th>
       </tr>
       <tr>
         <td>Col1 Row1 Data</td>
         <td>Col2 Row1 Data</td>
         <td>Col3 Row1 Data</td>
       </tr>
       <tr>
         <td>Col1 Row2 Data</td>
         <td>Col2 Row2 Data</td>
         <td>Col3 Row2 Data</td>
       </tr>
    </table>
 </body>
</html>

css

table, tr {
  border: 1px solid black;
}

Below is what how it will appear in a browser

Column 1 header Column 2 header Column 3 header
Col1 Row1 Data Col2 Row1 Data Col3 Row1 Data
Col1 Row2 Data Col2 Row2 Data Col3 Row2 Data

Column 1 header	Column 2 header	Column 3 header
Col1 Row1 Data	Col2 Row1 Data	Col3 Row1 Data
Col1 Row2 Data	Col2 Row2 Data	Col3 Row2 Data

Keep tract of the number of rows

It is important that each TR element has the same number of TH and TD elements throughout the table. If there is a mismatch, the browser gets to decide how to render a lopsided table. It make create an empty area or a blank cell

colspan and rowspan

colspan

TH and TD column elements can be made to span multiple. This would typically be done to a TH to make a heading span more than one set of TD elements

Example:

html

<!DOCTYPE html>
<html>
 <body>
	<table>
		<tr>
			<th colspan="2">Name</th>
			<th>Age</th>
		</tr>
		<tr>
			<td>Steve</td>
			<td>Smith</td>
			<td>36</td>
		</tr>
		<tr>
			<td>Joan</td>
			<td>Johnson</td>
			<td>29</td>
		</tr>
	</table>
 </body>
</html>

Below is what how it will appear in a browser

Name Age
Steve Smith 36
Joan Johnson 29

Name	Age
Steve	Smith	36
Joan	Johnson	29

rowspan

rowspan works like colspan, but combines multiple rows in a single column

This is useful when you want to make the headers all appear in the first column and need to span 2 or more TH elements

Example:
html
<!DOCTYPE html>
<html>
 <body>
	<table>
		<tr>
			<th rowspan="2">Name</th>
			<td>Steve</td>
			<td>Joan</td>
		</tr>
		<tr>
			<td>Smith</td>
			<td>Johnson</td>
		</tr>
		<tr>
			<th>Age</th>
			<td>29</td>
			<td>36</td>
		</tr>
	</table>
 </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Below is what how it will appear in a browser
Name Steve Joan
Smith Johnson
Age 29 36
Note that each TR contains 1 TH and 2 TD elements, except for the 2nd block

Name	Steve	Joan
Smith	Johnson
Age	29	36

Tables formatted with Heading in the first column are less common than Headers in the first row

Styling Tables

CSS properties can be applied to TABLE, TH, and TD HTML elements

The examples before use the following HTML

html

<!DOCTYPE html>
<html>
 <body>
    <table>
       <tr>
         <th>Column 1 header</th>
         <th>Column 2 header</th>
         <th>Column 3 header</th>
       </tr>
       <tr>
         <td>Col1 Row1 Data</td>
         <td>Col2 Row1 Data</td>
         <td>Col3 Row1 Data</td>
       </tr>
       <tr>
         <td>Col1 Row2 Data</td>
         <td>Col2 Row2 Data</td>
         <td>Col3 Row2 Data</td>
       </tr>
    </table>
 </body>
</html>

border

Sets border line width and format

css
table, tr {
  border: 1px solid black;
}
th {
 border: 4px dashed red;  
}
1
2
3
4
5
6
Below is what how it will appear in a browser
Column 1 header Column 2 header Column 3 header
Col1 Row1 Data Col2 Row1 Data Col3 Row1 Data
Col1 Row2 Data Col2 Row2 Data Col3 Row2 Data

Column 1 header	Column 2 header	Column 3 header
Col1 Row1 Data	Col2 Row1 Data	Col3 Row1 Data
Col1 Row2 Data	Col2 Row2 Data	Col3 Row2 Data

width/height

Sets border line width and look

css
table {
  width: 100%;
}
th {
  height: 80px;
}
table, tr {
  border: 1px solid;
}
1
2
3
4
5
6
7
8
9
Note that the width is in percent (5) and height is in pixels (px)
Below is what how it will appear in a browser
Column 1 header Column 2 header Column 3 header
Col1 Row1 Data Col2 Row1 Data Col3 Row1 Data
Col1 Row2 Data Col2 Row2 Data Col3 Row2 Data

Column 1 header	Column 2 header	Column 3 header
Col1 Row1 Data	Col2 Row1 Data	Col3 Row1 Data
Col1 Row2 Data	Col2 Row2 Data	Col3 Row2 Data

text-align

Set text alignment within table sections

css
th {
  text-align: center;
}
td {
  text-align: left;
}
table, tr {
  border: 1px solid;
}
1
2
3
4
5
6
7
8
9
Below is what how it will appear in a browser
Column 1 header Column 2 header Column 3 header
Col1 Row1 Data Col2 Row1 Data Col3 Row1 Data
Col1 Row2 Data Col2 Row2 Data Col3 Row2 Data

Column 1 header	Column 2 header	Column 3 header
Col1 Row1 Data	Col2 Row1 Data	Col3 Row1 Data
Col1 Row2 Data	Col2 Row2 Data	Col3 Row2 Data

padding

Add white space around text in table elements

css
th {
  text-align: center;
  padding: 30px;
}
td {
  text-align: left;
  padding: 15px;
}
table, tr {
  border: 1px solid;
}
1
2
3
4
5
6
7
8
9
10
11
Below is what how it will appear in a browser
Column 1 header Column 2 header Column 3 header
Col1 Row1 Data Col2 Row1 Data Col3 Row1 Data
Col1 Row2 Data Col2 Row2 Data Col3 Row2 Data

Advanced Topics ​

Table Elements ​

Table <table> ​

Table Row <tr> ​

Table Header <th> ​

Table Data <td> ​

colspan and rowspan ​

colspan ​

rowspan ​

Styling Tables ​

border ​

width/height ​

text-align ​

padding ​

Advanced Topics

Table Elements

Table <table>

Table Row <tr>

Table Header <th>

Table Data <td>

colspan and rowspan

colspan

rowspan

Styling Tables

border

width/height

text-align

padding