Constructing Table by Using HTML
-
Upload
keefe-allen -
Category
Documents
-
view
23 -
download
1
description
Transcript of Constructing Table by Using HTML
Compiled by ackoo
Constructing Table by Using HTML
Compiled by ackoo
Recall this…
So far, you know that html has its basic structure, which are build up from html elements, tags, tag attributes and value.
For eg:<html> </html><body bgcolor=“Black” > </body><h1>This is Heading 1</h1><p> I have a pet. He is a cat. His name is
Pat.</p><img src=“bg.gif” height=“200” width=“300” />
Compiled by ackoo
Let’s do some practices…
Surf to this url:
http://www.w3schools.com/html/html_examples.asp
Compiled by ackoo
Table and its Part
borderOutline around the
table, with shade.
cellpaddingSpace between contents
and border
cellspacingSpace between cells
Table contents
Table Width
Table H
eight
Compiled by ackoo
Table and its HTML Tag
<table>
<tr> <td>
<tr> <td>
<td>
<td>
Compiled by ackoo
Example of HTML with Table
Compiled by ackoo
Constructing TableThe following are the summary of Table Tag and its attributes
Tag Attributes Function
<table>
</table>
bgcolor=“number” or “name”
border=“number”
cellpadding=“number”
cellspacing=“number”
height=“number”
width=“number”
Establishes beginning and end of a table.
Background color for the whole table.
Thickness of the border around the table (in pixels)
Space within cells (in pixels)
Space between cells (in pixels)
Table height (in pixels or %)
Table width (in pixels or %)
Compiled by ackoo
Constructing TableThe following are the summary of Table Tag and its attributes
Tag Attributes Function
<tr>
</tr>
**table row bgcolor=“number” or “name”
align=“left” (or right or center)
valign=“top” (or middle or bottom or baseline)
Establishes a row within (nested) in a table.
Background color for the entire row.
Horizontal alignment of cell contents for an entire row.
Vertical alignment of cell contents for the entire row.
Compiled by ackoo
Constructing TableThe following are the summary of Table Tag and its attributes
Tag Attributes Function
<td>
</td>
**table data bgcolor=“number” or “name”
align=“left” (or right or center)
valign=“top” (or middle or bottom or baseline)
colspan=“number”
rowspan=“number”
height=“number”
width=“number”
Establishes a cell within a table row.
Background color for the cell.
Horizontal alignment of the cell content.
Vertical alignment of the cell content.
Number of columns the cell should span.
Number of rows the cell should span.
Cell height (in pixels or %)
Cell width (in pixels or %)
Compiled by ackoo
In-class Exercise. Do it now.
You are a web designer for a Holiday Resort. Create one web page which contains TABLE(s) and information about the Holiday Resort. You can also put some images in the table.