Aug
12
2011
12
2011
Lesson 11 – Tables
An article by 
Tables are used to show tabular data. There are a few tags you should be aware of before creating tables.
| <table> | Defines the start and end of a table |
| <tr> | Defines rows of a table and stands for table row |
| <td> | Defines a cell of a table and stands for table data |
To create a table which has 2 rows and 3 columns it would be created as:
<html>
<head>
<title>Tables</title>
</head>
<body>
<table>
<tr>
<td>Row 1 Col 1 </td>
<td>Row 1 Col 2 </td>
<td>Row 1 Col 3 </td>
</tr>
<tr>
<td>Row 2 Col 1 </td>
<td>Row 2 Col 2 </td>
<td>Row 2 Col 3 </td>
</tr>
</table>
</body>
</html>
Just remember that each row is defined as <tr> and is nested inside the <table> tag. Each column is defined as cells (<td>) within each row and the number of cells within each row must equal the same amount.
Here is a listing of a few attributes you can add to the <table> tag.
| width | Defines the width of the table in pixels or percentages. |
| border | The width of the border of the table. I prefer the setting of 0. |
| cellspacing | The spacing between the cells of the table. |
| cellpadding | The spacing between the edges of the cell and the content it contains. |
<html>
<head>
<title>Table Attributes</title>
</head>
<body>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td>Row 1 Col 1 </td>
<td>Row 1 Col 2 </td>
<td>Row 1 Col 3 </td>
</tr>
<tr>
<td>Row 2 Col 1 </td>
<td>Row 2 Col 2 </td>
<td>Row 2 Col 3 </td>
</tr>
</table>
</body>
</html>
Tags: HTML
