Reading: Tables

Here’s how to add a simple table to your web page. This table has two rows and three cells in each row:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>The title goes here</title>
<meta charset=”utf-8″>
<title>Tables are Fun </title>
<style type=”text/css”>

table
{
border-style: solid;
}

td
{
border-style: solid;
border-color: #FF66FF;
padding: 10px;
}
</style>
</head>

<body>
<h1>My Lovely Table </h1>
<table>
<tr>
<td>1st Cell</td>
<td>2nd Cell</td>
<td>3rd Cell</td>
</tr>
<tr>
<td>4th Cell</td>
<td>5th Cell</td>
<td>6th Cell</td>
</tr>
</table>
</body>
</html>

Let’s analyze this code. The <table> tag starts the table, the <tr> tag starts the row, and the <td> tag starts the cell. (I think it stands for “table data.”) Every opening tag has a corresponding ending tag. I’ve used embedded CSS to style the <table> and <td> tags. The table itself has a solid border. Each cell appears with a solid pink border, and each cell has 10 pixels of padding. Cell padding is the space between the contents of the cell and the cell border.