LESSON III THE HTML TABLES

Words to Remember!

<table> <tr> <td> table data <th> <theader>

<caption> <colspan> <li> <cellpadding>

The tables are defined with the <table> and close by an ending </table> tag.

A table is divided into rows with the <tr> tag, and each row is divided into data

cells with the <td> tag. td stands for "table data”. Table data holds the content of a data

cell it can can contain text, links, images, lists, forms, other tables, etc.

Creating a Simple Table

 In our example above we specify a border attribute which is equal to 1. If we do

not specify a border the table will be displayed without borders. To display a table with

borders, specify the border attribute:

Save your file as simpletable.html and run the browser to see the output.

Table Headings

From a plain table you can also put a header unto it. Header information in a

table are defined with the <th> tag. The text in a th element will be bold and centered as
you run your browser. Type the following example to see the difference from a palin

table with a table that has a border.

From the given example above we set a table with 3 heading and each heading

has 3 table data. Aside from 2-3 data you can also add another data just by adding a

new <td> tag.

How to add caption to a table

 Though a table with border is pleasing to the viewing you can also caption on it to

guide the viewer what table are they already on your page. By using the <caption> tag

you add caption or title each table you add in your page. Take a look in our example

below.

By using a caption we are able to display a caption My pets in our webpage.

Table cell that span more than one row and column
 In html table span is used to split the table into column and rows and it comes

into two types rows and column.

Two types

1. Cell that span two column

2. Cell that span two row

Example of Cell that span two column

In the example above you will notice that the Telephone has split into two two columns

beacause of the tag we used <colspan = “2”>, =2 is the number of cells

Example of Cell that span two rows

As shown in the example above Cellphone row is split into 2 cells it is because

of the code we put <th rowspan = “2”>.

Adding tags inside a table

Html also provide an advance faeture of displaying elements inside another

element example adding table inside the row or cell, adding pictures inside a table and
even adding lists. Try to encode all the code below and run your browser to see the

output.

In the example above we have inserted another element inside the table one of

those element are table iside the table and bulleted list. List will be discuss to the next

lesson.

Adding Cellpadding
Cellpadding is used to create more white space between the cell content and its

borders. Let us compare the difference between table with cellpadding and table without

cellpadding. Type the following code below and run your browser to see the output.

In the example above the text inside the cell are wrapped inside the cell. To

make a whitespace inside the table cell you can use a <cellpadding> tag. Next figure is

an example of table with cellpadding.

In the example ouput after setting <cellpadding = “15”> the text inside the cell has

already has a whitespace and is more readable.

Summary of Tags used in Table

Tag description
<table> Define table
<th> Define a table header
<tr> Define a table row
<td> Define a table data or cell
<caption> Define a table caption
<colgroup Defines a group of columns in a table, for formatting

>
<col/> Defines attribute values for one or more columns in a table
<thead> Groups the header content in a table
 </tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

Lesson Summary

• The tables are defined with the <table> and close by an ending </table> tag.

• A table is divided into rows with the <tr> tag, and each row is divided into data

cells with the <td> tag. td stands for "table data”. Table data holds the content of

a data cell it can can contain text, links, images, lists, forms, other tables, etc.

• Header information in a table are defined with the <th> tag.

• By using the <caption> tag you add caption or title each table you add in your

page.

• In html table span is used to split the table into column and rows and it comes

into two types rows and column.

• Cellpadding is used to create more white space between the cell content and its

borders

Study Help

Name: Score:

Year/School: Date:
Test I Hands-on Application

1. Invoke your notepad program. Notepad

open.

2. Write your html code that will produce an

output the same as the given output below.

3. Set “The Alphabet ” as <h2>

4. Set your table border to 3 and cellpadding

to 10.

5. Set your colspan to 5.

6. In each row write a table data of 5

consisting the 5 letters in alphabetical

order.

7. Save your file as lesson3-test1.html.

8. Run your browser and print the output.

Study Help

Name: Score:

Year/School: Date:
Test II Identification

Number A B C D
1 <td> <tr> <table> <th> This tag is used to

define a table in html

2 <td> <tr> <table> <th> Defines the tables

row
3 <td> <tr> <table> <th> Defines the table

data
4 <td> <tr> <table> <th> Defines a table

header
5 <caption> <tfoot> <thead> <tbody> Used to group the

footer
6 <caption> <tfoot> <thead> <tbody> Used to group the

header content
7 <caption> <tfoot> <thead> <tbody> Use to group the

table body
8 <caption> <tfoot> <thead> <tbody> Used to add caption

or title onto the table

9 <p> <cellpadding> <colspan> <title> Used to add

whitespace
10 <p> <cellpadding> <colspan> <title> Uesd to split a row or

cell