HTML: Tables

Hyper Text Markup Language

Markup:

<table> = Table for information
<th> = Table Header of data (Column)
<tr> = Row within table
<td> = Data Cells within Table (Column)

Example

HTML Code

Result

<table style=”width: 100%;”>
<tbody>
<tr align=”left” valign=”top”>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
</tr>
<tr>
<td>Karina</td>
<td>Bolivia</td>
<td>555.555.5551</td>
</tr>
<tr>
<td>Michael</td>
<td>Grecko</td>
<td>555.555.5552</td>
</tr>
<tr>
<td>Betsy</td>
<td>Boston</td>
<td>555.555.5553</td>
</tr>
</tbody>
</table>
&nbsp;</td>
</tr>
</tbody>
</table>
Firstname Lastname Phone
Karina Bolivia 555.555.5551
Michael Grecko 555.555.5552
Betsy Boston 555.555.5553

(beware of smart quotes)



Attributes:

<td rowspan=”2″> = Expand the row down (the column)
<td colspan=”2″> = Expand the data across the row ( of columns)

Data Cells can Span multiple rows
<th rowspan=”2″> or <td rowspan=”2″>

<table style=”width:100%”>
<tr>
<th>Name:</th>
<td>Kather</td>
</tr>
<tr>
<th rowspan=”2″>Telephone:</th>
<td>555.555.7771</td>
</tr>
<tr>
<td>555.555.7772</td>
</tr>
</table>
Name: Katherine Core
Telephone: 555.555.7771
555.555.7772

Data Cells can Span multiple columns
<th colspan=”2″> or <td colspan=”2″>

<table width=”99%” border=”1″ cellspacing=”5″ cellpadding=”5″>
<tr>
<td colspan=”2″>First and Last</td>
<td>Phone</td>
</tr>
<tr>
<td>Jerry</td>
<td>Band</td>
<td>555.666.7777</td>
</tr>
</table>
First and Last Phone
Jerry Band 555.666.7777