Table

Table

It is a tabular arrangement of information on your screen.

A table is made up of rows and columns of cells into which you can insert text and graphics.

Table is an object of a webpage use to organize the information on it.

Usage of a Table

It is used to organize the information of a Web page.

A table is made up of rows and columns of cells into which you can insert text and graphics.

You can customize your tables in a variety of ways to make them more attractive and easy to read.

Elements of a Table

Cell– The basic element of a table

Row– Specifies the horizontal dimension of a table.

Column– Specifies the vertical dimension of a table

HTML Tag

<table></table>

Attribute of a Table

Border– specifies the thickness of the lines

around the table.– The value is any number between 1-20.– The syntax:

• <table border=“number”>

Attribute of a Table

BACKGROUND– Provides the URL of an image file to be

used as the table’s background.– The syntax:

• <table background=“URL”>

Attribute of a Table

BGCOLOR– Denotes the color of the table covering

the whole table itself.– The value is a hexadecimal color code

or the name of the color itselft.– The syntax:

• <table bgcolor=“name of the color”>

Attribute of a Table

BORDERCOLOR– Denotes the color of the table border

only.– The value is a hexadecimal color code

or the name of the color itself.– The syntax:

• <table bordercolor=“name of the color”>

Attribute of a Table

ALIGN– Sets the horizontal alignment of the

element inside the Web browser.– The value can be left, right and center– The syntax:

• <table align=“position of the table”>

Attribute of a Table

CELLPADDING– Sets the number of space between cell

walls and its content. – The value are in pixels (px) or as a

percentage.– The syntax:

• <table cellpadding=“10”>

Attribute of a Table

CELLSPACING– Sets the number of space in pixels or as

a percent between cells. – The syntax:

• <table cellspacing=“10”>

Attribute of a Table

WIDTH – – Sets the horizontal dimension of a table– The syntax

• <table width=“ %”>

HEIGHT– Sets the vertical dimension of a table– The syntax

• <table height=“ %”>

COMPONENTS OF A TABLE ELEMENT

The TABLE ROW Element

The <tr> tag is used to create a row within the <table> tag.

The syntax:<table>

<tr>

</tr>

</table>

<TR> ATTRIBUTE

Align BgcolorBordercolorHeightTitle

The TABLE DATA Element

The <td> tag is used to create a cell within a row in a table element. You can put any content on each cell.

The syntax:<table>

<tr>

<td> TEXT</td>

<td> TEXT </td>

</tr>

</table>

<TR> ATTRIBUTE

Align BgcolorBordercolorHeightTitle….

The TABLE HEADER Element

The <th> tag is used to create a row header within the table element. Mostly, web browsers display the content of the <th>element in a boldfaced font and centered within the table cell.

The syntax:<table>

<tr>

<th> TEXT</th>

<th> TEXT </th>

</tr>

</table>

<TR> ATTRIBUTE

Align BgcolorBordercolorHeightTitle….

Let’s Analyze the Input

<table>

<tr>

<th>NAME</th>

<th>SECTION</th>

</tr>

<tr>

<td>Hannah Keziah</td>

<td>IV - Faithful</td>

</tr>

<tr>

<td>Jhoanna Raissa</td>

<td>III - Visitation</td>

</tr>

</table>

Give the InputTLE SPECIALIZATION TEACHER

ICT IV Mrs. Rosalinda S. Endaya

Accounting Mrs. Rosalinda R. Laxamana

Culinary Arts Mrs. Cristina N. De Paz

Give the InputNO. TLE

SPECIALIZATIONTEACHER

1 ICT IV Mrs. Rosalinda S. Endaya

2 Accounting Mrs. Rosalinda R. Laxamana

3 Culinary Arts Mrs. Cristina N. De Paz

Quiz

Direction

1. Create an HTML document of given table.

2. Follow the given format:

3. Apply the following:1. Table Border – 5

2. Cell spacing – 2

3. Cell padding - 3

4. Align center all the content of cell.

UNIT OF MEASURE EQUIVALENT3 tsp. 1 tbs.

4 tbs. 1/4 cup

5 1/3 tbs. 1/2 cup

8 tbs. 2/3 cup

12 tbs. 3/4 cup

16 tbs. 1 cup

1. Table Border – 5

2. Cell spacing – 2

3. Cell padding - 3