Useful Resources
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses
Tables in HTML

Tables in HTML

A table is a grid made up of ROWS and CELLS within each ROW (columns).

Draw a SKETCH and plan BEFORE beginning your table.

<table> </table>
<tr> </tr> --ROW
<td> </td> --CELL

1 2 3
4   6

Code:

<table width="100" border=2>

<tr>                            <!--row 1-->

<td>1</td>               <!--cell 1-->
<td>2</td>               <!--cell 2-->
<td>3</td>               <!--cell 3 -->

</tr>
<tr>                            <!--row 2-->

<td>4</td>               <!--cell 4 -->
<td>&nbsp;</td>     <!--cell 5 -->
<td>6</td>               <!--cell 6 -->

</tr>

</table>

&nbsp; is for adding a space (non-breaking space)



1 2 3
4   6

<td style="background-color:#CC0000;">1</td>
<td style="background-color:#999900;">6</td>


BORDER=n --n=number of pixels.

1 2 3
4 5 6

<table width="100" border="10">


1 2 3
4 5 6

<table border="0"> - use this for images with NO BORDER!


WIDTH=n --n=number of pixels
Overall Table Width = (w of columns) + (w of borders) + (w of cellspacing) + (w of cellpadding)

Use WIDTH attribute in <table width="600"> OR <td width="100">
Generally you use WIDTH only with the FIRST cell in each column, but if it spans more than one column, you may need to add WIDTH to each cell.

ALIGN="direction" --justification on page: CENTER, RIGHT or LEFT.


1 2 3
4 5 6
<table width="100" border=2 align="center">

CELLSPACING=n --n=pixels; Adds space BETWEEN individual cells; Default=2.

CELLPADDING=n --n=pixels; Adds space AROUND the contents of a cell (between the contents and its border); Default=1;

1 2 3
4   6

<table width="100" border=2 cellspacing="10">

1 2 3
4   6

<table width="100" border=2 cellpadding="10">


Attributes for the <TR> row tag

HEIGHT=n --n=number of pixels
Generally you use HEIGHT with row tag and it will effect height of cells within it.


Attributes for the <TD> cell tag

ALIGN="direction" --(left, right, center) ALIGN CONTENTS of a CELL HORIZONTALLY (text, images, etc.)

VALIGN="direction" --(top, middle, bottom) ALIGN CONTENTS of a CELL VERTICALLY within the cell


You can also use these in the TR tag to apply that to all the cells in that ROW!!

COLSPAN=n, --n = number of COLUMNS to span (horizontal) (to span across more than one column (width))

ROWSPAN=n, --n = number of ROWS to span (vertically) (to span across more than one row (height))

You can also add color to the rows or columns:

Here are examples:

Scores
Red 01
Green 02
Blue 03
Results
Winner Red
Loser Blue
Middle Man Green

<table border=2 cellpadding=4>
<tr>
<th colspan=2>Scores</th>
</tr>
<tr>
<td>
Red</td>
<td>
01</td>
</tr>
<tr>
<td>
Green</td>
<td>
02</td>
</tr>
<tr>
<td>
Blue</td>
<td>
03</td>
</tr>
<tr>
<th colspan=2>
Results</th>
</tr>
<tr>
<td>
Winner</TD>
<td>
Red</TD>
</tr>
<tr>
<td>
Loser</td>
<td>
Blue</td>
</tr>
<tr>
<td>
Middle Man</td>
<td>
Green</td>
</tr>
</table>


Information
Artists Davinci 1452
Dali 1904
Warhol 1928
Musicians Bach 1685
Cage 1912
Lennon 1940

Put this at the top in the HEAD tab:

<style type="text/css">
<!--
th.red {
            background-color: #FF0000; color: black;
}
th.blue {
            background-color: #AAAAFF; color: black;
}
-->
</style>

Put this in the BODY:

<table border=2 cellpadding=4>
<tr>
<th colspan=3 class="red">
Information</th>
</tr>
<tr>
<th rowspan=3 class="blue">
Artists</th>
<td>
Davinci</td>
<td>
1452</td>
</tr>
<tr>
<td>
Dali</td>
<td>
1904</td>
</tr>
<tr>
<td>
Warhol</td>
<td>
1928</td>
</tr>
<tr>
<th rowspan=3 class="blue">
Musicians</th>
<td>
Bach</td>
<td>
1685</td>
</tr>
<tr>
<td>
Cage</td>
<td>
1912</td>
</tr>
<tr>
<td>
Lennon</td>
<td>
1940</td>
</tr>
</table>

 

[BACK to RESOURCES]