Human Computer Interaction
Tables
▪ The <TABLE></TABLE> element has four sub-
elements:
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
4. Caption <CAPTION></CAPTION>.
▪ The table row elements usually contain table
header elements or table data elements.
Human Computer Interaction
<table border="1">
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
<td> Row1, Col2 </td>
</tr>
<tr>
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr>
</table>
Human Computer Interaction
Column 1 Header Column 2 Header
Row1, Col1 Row1, Col2
Row2, Col1 Row2, Col2
Human Computer Interaction
Tables Attributes
BGColor: Some browsers support background colors in
a table.
Width: you can specify the table width as an absolute
number of pixels or a percentage of the document
width. You can set the width for the table cells as well.
Border: You can choose a numerical value for the
border width, which specifies the border in pixels.
CellSpacing: Cell Spacing represents the space
between cells and is specified in pixels.
Human Computer Interaction
Table Attributes
▪ CellPadding: Cell Padding is the space between the
cell border and the cell contents and is specified in
pixels.
▪ Align: tables can have left, right, or center
alignment.
▪ Background: Background Image, will be titled in
IE3.0 and above.
▪ BorderColor, BorderColorDark.
Human Computer Interaction
Table Caption
▪ A table caption allows you to specify a line of text
that will appear centered above or bellow the table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> Label For My
Table </CAPTION>
▪ The Caption element has one attribute ALIGN that
can be either TOP (Above the table) or BOTTOM
(below the table).
Human Computer Interaction
Table Header
▪ Table Data cells are represented by the TD element.
Cells can also be TH (Table Header) elements which
results in the contents of the table header cells
appearing centered and in bold text.
Human Computer Interaction
Table Data and Table Header Attributes
▪ Colspan: Specifies how many cell columns of the table this
cell should span.
▪ Rowspan: Specifies how many cell rows of the table this cell
should span.
▪ Align: cell data can have left, right, or center alignment.
▪ Valign: cell data can have top, middle, or bottom alignment.
▪ Width: you can specify the width as an absolute number of
pixels or a percentage of the document width.
▪ Height: You can specify the height as an absolute number of
pixels or a percentage of the document height.
Human Computer Interaction
<TABLE BORDER=1 width=50%>
<CAPTION> <h1>Spare Parts <h1> </Caption>
<TR><TH>Stock Number</TH><TH>Description</TH><TH>List
Price</TH></TR>
<TR><TD bgcolor=red>3476-AB</TD><TD>76mm
Socket</TD><TD>45.00</TD></TR>
<TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font>
</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>
</TABLE>
Human Computer Interaction
Table Data and Table Header Attributes
<Table border=1 cellpadding =2>
<tr> <th> Column 1 Header</th>
<th> Column 2 Header</th> </tr>
<tr> <td colspan=2> Row 1 Col 1</td> </tr>
<tr> <td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td> </tr>
<tr> <td> Row 3 Col2</td> </tr>
</table>
Human Computer Interaction
Column 1 Header Column 2 Header
Row 1 Col 1
Row 2 Col 2
Row 2 Col 1
Row 3 Col 2
Human Computer Interaction
<TABLE BORDER width="750">
<TR> <TD colspan="4" align="center">Page
Banner</TD></TR>
<TR> <TD rowspan="2" width="25%">Nav
Links</TD><TD colspan="2">Feature Article</TD>
<TD rowspan="2" width="25%">Linked
Ads</TD></TR>
<TR><TD width="25%">News Column 1 </TD>
<TD width="25%"><News Column 2 </TD></TR>
</TABLE>
Human Computer Interaction
The Output
Width = 750
Page Banner
colspan
Feature Article
colspan
Nav Links Linked Ads
rowspan News Column 1 News Column 2 rowspan
