Constructing Table by Using HTML

10
Compiled by ackoo Constructing Table by Using HTML

description

Constructing Table by Using HTML. 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: This is Heading 1 - PowerPoint PPT Presentation

Transcript of Constructing Table by Using HTML

Page 1: Constructing Table by Using HTML

Compiled by ackoo

Constructing Table by Using HTML

Page 2: 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” />

Page 3: Constructing Table by Using HTML

Compiled by ackoo

Let’s do some practices…

Surf to this url:

http://www.w3schools.com/html/html_examples.asp

Page 4: Constructing Table by Using HTML

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

Page 5: Constructing Table by Using HTML

Compiled by ackoo

Table and its HTML Tag

<table>

<tr> <td>

<tr> <td>

<td>

<td>

Page 6: Constructing Table by Using HTML

Compiled by ackoo

Example of HTML with Table

Page 7: Constructing Table by Using HTML

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 %)

Page 8: Constructing Table by Using HTML

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.

Page 9: Constructing Table by Using HTML

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 %)

Page 10: Constructing Table by Using HTML

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.