Download presentation
Presentation is loading. Please wait.
1
Constructing Table by Using HTML
2
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” />
3
Let’s do some practices…
Surf to this url: Basic Tags Revision Use this “A very simple HTML document”, type in a poem… change the bgcolor of the document. -what about change the text color of that document -write a poem, and type in the poem with line break and with different paragraph. -add a background image / cancel the background image. -how to add a comment, eg to remark that the poem is written by mmmmm
4
Table and its Part border cellspacing cellpadding Table contents
Table Width border Outline around the table, with shade. Table Height cellspacing Space between cells Basic Tags Revision Use this “A very simple HTML document”, type in a poem… change the bgcolor of the document. -what about change the text color of that document -write a poem, and type in the poem with line break and with different paragraph. -add a background image / cancel the background image. -how to add a comment, eg to remark that the poem is written by mmmmm cellpadding Space between contents and border Table contents
5
Table and its HTML Tag <td> <td> <tr> <table>
Basic Tags Revision Use this “A very simple HTML document”, type in a poem… change the bgcolor of the document. -what about change the text color of that document -write a poem, and type in the poem with line break and with different paragraph. -add a background image / cancel the background image. -how to add a comment, eg to remark that the poem is written by mmmmm
6
Example of HTML with Table
Basic Tags Revision Use this “A very simple HTML document”, type in a poem… change the bgcolor of the document. -what about change the text color of that document -write a poem, and type in the poem with line break and with different paragraph. -add a background image / cancel the background image. -how to add a comment, eg to remark that the poem is written by mmmmm
7
Constructing Table The 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 %)
8
Constructing Table The 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.
9
Constructing Table The 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 %)
10
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. Basic Tags Revision Use this “A very simple HTML document”, type in a poem… change the bgcolor of the document. -what about change the text color of that document -write a poem, and type in the poem with line break and with different paragraph. -add a background image / cancel the background image. -how to add a comment, eg to remark that the poem is written by mmmmm
Similar presentations
