Creating Tables

Contact Us or call 1-877-932-8228
Creating Tables

Creating Tables

Tables are made up of one or more table rows, which contain one or more table cells. The tag for creating tables is <table>. The table row tag is <tr> and the two tags that can create table cells are <td> and <th>. Below is a simple table:

Code Sample:

Tables/Demos/TableHomeruns.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Home Run Hitters</title>
</head>
<body>
<table>
<caption>All-time Home Run Record</caption>
<tr>
	<th>Player</th>
	<th>Home Runs</th>
	<th>Team</th>
</tr>
<tr>
	<td>Hank Aaron</td>
	<td>755</td>
	<td>Braves</td>
</tr>
<tr>
	<td>Babe Ruth</td>
	<td>714</td>
	<td>Yankees</td>
</tr>
<tr>
	<td>Willie Mays</td>
	<td>660</td>
	<td>Giants</td>
</tr>
</table>
</body>
</html>

The <th> elements are table header cells. By default, their content will be centered and bolded. The <td> elements are table data cells. By default, their content will be plain text and left aligned. The display of tables (background colors, borders, column width, row height, etc.) can be controlled with CSS.

Adding a Caption

The table above has a caption, which is added by inserting the <caption> tag after the open <table> tag:

<table>
	<caption>All-time Home Run Record</caption>
	<tr>...

The image below shows how this table will be rendered in the browser:Table Rendered in Browser

Next