USING HTML
TABLES
PRESENTING INFORMATION
& LAYOUT CONTROL
USING HTML TABLES
• You can use the <table>…</table> container to display
information in table format.
• You can use the <table>…</table> container to control the
layout of a page.
USING TABLES FOR
INFORMATION
USING TABLES FOR LAYOUT
THE <TABLE>…</TABLE>
CONTAINER
• Defines the beginning and end of a table
• Attributes
• background
• bgcolor
• border
• cellspacing
• cellpadding
• width
• height
THE <TR>…</TR> CONTAINER
• Defines a table row
• Structural tag only (no content)
• Attributes
• align
• valign
• bgcolor
<TH>…</TH> EXAMPLE
<tr>
<th>
Table
</th>
<th>
…
</th>
</tr>
THE <TD>…</TD> CONTAINER
• Defines a data cell in a table
• Can contain any content, including another, nested table
• Attributes: background width
• align bgcolor
height
colspan
• valign rowspan
• height
EXAMPLE1
• <HTML>
• <HEAD>
• <TITLE>
• Use of Character Formatting Text Tags
• </TITLE>
• </HEAD>
• <BODY>
• <table>
• <tr>
• <th>Company</th>
• <th>Contact</th>
• <th>Country</th>
• </tr>
• <tr>
• <td>Alfreds Futterkiste</td>
• <td>Maria Anders</td>
• <td>Germany</td>
• </tr>
• <tr>
• <td>Centro comercial Moctezuma</td>
• <td>Francisco Chang</td>
• <td>Mexico</td>
• </tr>
• </table>
• </BODY>
• </HTML>
EXAMPLE 2
• <HTML>
• <BODY>
• <table>
• <tr>
• <th>Person 1</th>
• <th>Person 2</th>
• <th>Person 3</th>
• </tr>
• <tr>
• <td>Emil</td>
• <td>Tobias</td>
• <td>Linus</td>
• </tr>
• <tr>
• <td>16</td>
• <td>14</td>
• <td>10</td>
• </tr>
• </table>
• </BODY>
• </HTML>
HTML TABLE BORDERS
• To add a border, use the CSS border property on
table, th, and td elements:
Example:
table, th, td {
border: 1px solid black;
}
SINGLE BORDER
• table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
STYLE TABLE BORDERS
• table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
ROUND TABLE BORDERS
• table, th, td {
border: 1px solid black;
border-radius: 10px;
}
DOTTED TABLE BORDERS
• The following values are allowed:
th, td {
• dotted
border-
• dashed style: dotted;
• solid }
• double
• groove
• ridge
• inset
• outset
• none
• hidden
BORDER COLOR
• th, td {
border-color: #96D4D4;
}
•
<TD COLSPAN …> EXAMPLE
<tr>
<td colspan=“2”
bgcolor=“blue”>
</td>
<td>
…
</td>
</tr>
<TD ROWSPAN …> EXAMPLE
<tr>
<td rowspan=“2”
bgcolor=“blue”>
</td>
<td>
…
</td>
</tr>
<TH>…</TH> CONTAINER
• Defines a header cell
• Acts just like a <td>…</td> container, except …
• The text is normally centered vertically and horizontally
AND the text is bold
• Attributes are the same as <td>…</td>
<CAPTION>…</CAPTION>
CONTAINER
• Provides a summary of the table’s purpose
• MUST immediately follow <table>
• Attributes:
• align
• summary
• valign (MSIE only)
<CAPTION>…</CAPTION>
EXAMPLE
<caption align=“center”
summary=“Long Description goes here”
valign="bottom">
Figure 1: Hexadecimal Conversions
</caption>
USING TABLES FOR
MULTIPART IMAGES
• Use a basic table structure
• Set the border, cellpadding and cellspacing
attributes to “0” (zero)
• No spaces or page breaks between tags included
between <td> … </td>!
• Can be used for “Poor Man’s” Image Maps
• Example:
http://www.cs.iupui.edu/~rmolnar/n241/lectures/tablesFiles/index.html
