Lab 6 HTML Tables: Objectives

Lab 6
HTML Tables
Objectives:
• Creating HTML Tables

• Learn the different attributes of tables such as: caption, colspan, rowspan and
others.
• Create Frames and use it in your HTML page.
Defining an HTML Table
An HTML table is defined with the <table> tag. Each table row is defined with the <tr>
tag. A table header is defined with the <th> tag. By default, table headings are bold and
centered. A table data/cell is defined with the <td> tag.
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Asma</td>
<td>Mohammad</td>
<td>33</td>
</tr>
<tr>
<td>Ahmad</td>
<td>Naji</td>
<td>46</td>
</tr>
</table>
 Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
Tasks:
1. Double Border Table, Coloring and width
<html>
<head>
<style> table, th, td { border: solid; border-width: 3px;
border-color : red;}
th { color : green;}
td { color : blue;}
</style>
</head>
<body>
……… write the code of your table here.
</body>
</html>
2. Single Border Table

Ex. <head>
<style> table, th, td {
border: solid ;
border-collapse: collapse;
//single line border border-
width: 3px; border-color :
red;} th { color : green;} td { color : blue;}
</style> </head>
3. Table Cell Padding and cell spacing
Cell padding specifies the space between the cell content and its
borders. The cellspacing attribute specifies the space, in pixels,
between cells.
<table cellpadding="40" cellspacing=”30”>
……
</table>
Or try this
<table border="3" bordercolor="red" bgcolor="green" cellspacing="5"

cellpadding="3">
4. Table caption and cell coloring using bgcolor

• The <caption> tag defines a table caption. The <caption> tag must be inserted
immediately after the <table> tag. Note: You can specify only one caption per
table.
• bgcolor attribute allow you to give a color to the cell or to the row.
 <tr bgcolor=”blue”>
 <th bgcolor=”red” >
<table>
<caption>Student Marks</caption>
<tr>
<th bgcolor=”red” >Name</th>
<th bgcolor=”red” >Mark</th>
</tr>
<tr>
<td>Ali</td>
<td>30</td>
</tr>
</table>
5. align Attribute
The align attribute specifies the horizontal alignment of the content in a cell.
<table >
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td align="left">$100</td>
</tr>
<tr>
<td>February</td>
<td align="center">$80</td>
</tr> </table>
6. valign Attribute
The valign attribute specifies the vertical alignment of the content in a

cell.
Try this
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td valign="bottom">January</td>
<td valign="bottom">$100</td>
</tr>
</table>
7. rowspan and colspan Attributes
To combine /merge adjacent cells to create larger cell for data.
 rowspan: This attribute specifies the number of rows a cell should merged.
 colspan: This attribute specifies the number of columns a cell should merged.
Example1: rowspan attribute
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Example2: colspan attribute
<table>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
Write code for each:
1. A table that has a cell with an image and text in its content.
2. A table that has a cell with a link in its content.
3. A table that has a cell with a table in its content.

4.
Defining an HTML iframe element
The <iframe> tag specifies an inline frame. An inline frame is used to embed
another document within the current HTML document.
1. iframe Attributes
Attribute Value Description

src url Specifies the address of the document to embed
height pixels Specifies the height of an <iframe>
width pixels Specifies the width of an <iframe>
scrolling yes Specifies whether or not to display scrollbars
no
auto
name text Specifies the name of an <iframe>
Task. Create 3 html files : mm.html , bb.html and cc.html , write the next code in each
one:
1. mm.html
<p> Hello</p> <br/>
<img src: ".........."/> <br/>
<iframe src=”bb.html” width=”60” height=”70” name=”myfr”></iframe>

<a href=”cc.html” target=”myfr”>Change</a>
2. bb.html
<p>Welcome</p>
<img src=……/>
3. cc.html
<h1> Hello with iframes</h1>
Hometask:
Q1. Observe the output of the following piece of code:

<html>
<body>
<table border="3" bordercolor="blue" bgcolor="orange" cellspacing="5"

cellpadding="3">
<tr>
<td align="center" colspan="3" bgcolor="yellow" >MY DAILY MENU</td>
</tr>
<tr>
<td rowspan="3">M<br>o<br>n<br>d<br>a<br>y</td>
<td valign="top"><b>Breakfast</b></td>
<td>Orange juice<br>Toast<br>Black coffee</td>
</tr>
<tr>
<td valign="top"><b>Lunch</b></td>
<td>Tuna sandwich<br>Apple</td>
</tr>
<tr>
<td valign="top"><b>Dinner</b></td>
<td>Hamburger steak<br>Mashed potatoes<br>Green beans<br>Jello</td>
</tr>
</table>
</body>
</html>
Q2.Write the required code to create the following output:
Table 1.
Table2.

Lab 6 HTML Tables: Objectives

Uploaded by

Lab 6 HTML Tables: Objectives

Uploaded by

Lab 6

• Creating HTML Tables

Defining an HTML Table

1. Double Border Table, Coloring and width

<style> table, th, td { border: solid; border-width: 3px;

……… write the code of your table here.

2. Single Border Table

<style> table, th, td {

<table cellpadding="40" cellspacing=”30”>

<table border="3" bordercolor="red" bgcolor="green" cellspacing="5"

4. Table caption and cell coloring using bgcolor

The valign attribute specifies the vertical alignment of the content in a

To combine /merge adjacent cells to create larger cell for data.

Example1: rowspan attribute

<th>Savings for holiday!</th>

Example2: colspan attribute

2. A table that has a cell with a link in its content.

3. A table that has a cell with a table in its content.

Defining an HTML iframe element

Attribute Value Description

<p> Hello</p> <br/>

<img src: ".........."/> <br/>

<iframe src=”bb.html” width=”60” height=”70” name=”myfr”></iframe>

<a href=”cc.html” target=”myfr”>Change</a>

Q1. Observe the output of the following piece of code:

<table border="3" bordercolor="blue" bgcolor="orange" cellspacing="5"

<td align="center" colspan="3" bgcolor="yellow" >MY DAILY MENU</td>

<td>Orange juice<br>Toast<br>Black coffee</td>

<td>Hamburger steak<br>Mashed potatoes<br>Green beans<br>Jello</td>

Q2.Write the required code to create the following output:

You might also like