1. Table

2. 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.

3. 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.

4. 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

5. HTML Tag
 <table></table>

6. 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”>

7. 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”>

8. 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”>

9. 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”>

10. 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”>

11. 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”>

12. Attribute of a Table
 CELLSPACING
– Sets the number of space in pixels or as
a percent between cells.
– The syntax:
• <table cellspacing=“10”>

13. 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=“ %”>

14. COMPONENTS OF A TABLE
ELEMENT

15. The TABLE ROW Element
 The <tr> tag is used to create a row within
the <table> tag.
 The syntax:
<table>
<tr>
</tr>
</table>

16. <TR> ATTRIBUTE
 Align
 Bgcolor
 Bordercolor
 Height
 Title

17. 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>

18. <TR> ATTRIBUTE
 Align
 Bgcolor
 Bordercolor
 Height
 Title
 ….

19. 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>

20. <TR> ATTRIBUTE
 Align
 Bgcolor
 Bordercolor
 Height
 Title
 ….

21. 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>

22. Give the Input
TLE SPECIALIZATION TEACHER
ICT IV Mrs. Rosalinda S. Endaya
Accounting Mrs. Rosalinda R. Laxamana
Culinary Arts Mrs. Cristina N. De Paz

23. Give the Input
NO. TLE
SPECIALIZATION
TEACHER
1 ICT IV Mrs. Rosalinda S. Endaya
2 Accounting Mrs. Rosalinda R. Laxamana
3 Culinary Arts Mrs. Cristina N. De Paz

24. Quiz

25. 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.

26. UNIT OF MEASURE EQUIVALENT
3 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