Scribd
Upload
6 views

HTML Tables - Lecture 3

html

Uploaded by

Ebenezer Komla Gavua
Copyright
© © All Rights Reserved
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
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