1. WEBPROG1-Web Programming 1(HTML) Prelim Period
Handout 5
HTML Tables
Tables may seem difficult at first, but after working through this lesson you'll see
how they aren't too bad. The <table> tag is used to being the table. Within a table
element are the <tr> (table rows) and <td> (table columns) tags. Tables are a
handy way to create a site's layout, but it does take some getting used to. Here's
how to make a table.
Code:
<table border="1">
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
Display:
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
Content is placed within tables cells. A table cell is defined by <td> and </td>.
The border attribute defines how wide the table's border will be.
Spanning Multiple Rows and Cells
Use rowspan to span multiple rows and colspan to span multiple columns.
Note: if you would like to place headers at the top of your columns, use the
<th> tag as shown below. By default these headers are bold to set them apart from
the rest of your table's content.
Code:
<table border="1">
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
Display:
Column 1 Column 2 Column 3
Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1
Prepared By: RICHARD F. ORPIANO Page 1 of 2

2. WEBPROG1-Web Programming 1(HTML) Prelim Period
Handout 5
Cell Padding and Spacing
With the cellpadding and cellspacing attributes you will be able to adjust the
white space on your tables. Spacing defines the width of the border, while padding
represents the distance between cell borders and the content within. Color has been
added to the table to emphasize these attributes.
Code:
<table border="1" cellspacing="10"
bgcolor="rgb(0,255,0)">
<th>Column 1</th>
<th>Column 2</th>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
Display:
Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
And now we will change the cellpadding of the table and remove the cellspacing
from the previous example.
Code:
<table border="1" cellpadding="10"
bgcolor="rgb(0,255,0)">
<th>Column 1</th>
<th>Column 2</th>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
Display:
Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
The value you specify for padding and spacing is interpreted by the browser as a
pixel value you. So a value of 10 is simply 10 pixels wide. Most attributes that use
numeric values for their measurements use pixels.
Prepared By: RICHARD F. ORPIANO Page 2 of 2