Scribd
Upload
6 views

HTML Tables - Lecture 3

html

Uploaded by

Ebenezer Komla Gavua
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
6 views

HTML Tables - Lecture 3

html

Uploaded by

Ebenezer Komla Gavua
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 24

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

You might also like