Lecture 6

Building Tables

1
 Lecture Overview
• Introduction
• Creating a table
• Table borders
• Defining table dimensions
• Setting background color
• Setting background image
• Nesting tables

2
 Assignment
• Cat 1: Cat 2:
• Design a web site of your own choice with the
following specifications:
1)A minimum of 3 linked pages
2)Incorporate sound/video and images
3)Minimum three folders
4)Include a form
• Submitted to: [email protected]

3
 Introduction

Item Description Price Quantity Total

1. Dress 10000 3 30,000

2. Shirt 400 2 800

3. Trouser 1000 1 1000

4
 Introduction continued
• A structured element that consists of
rows and columns of cells.
• Table cells take any kind of content:
text, images, and even other tables.

5
 Creating a table
• 3 tags are involved:
1. <table> and </table> tags
• define where the table begins and
ends.
2. <tr> and </tr> tags (table row tags)
• define where a row begins and ends.

6
 Creating a table cont’d
3. <td> and </td> (table data tags )
• defines the individual cells within each
row.

7
 Adding Heading Row
• use the table heading tags - <th>
and </th>.
• Table headings are displayed in bold.

8
 Inserting Blank Cells
• Create empty cell elements:
<th></th>
or
<td></td>

9
 Working with Borders

• influenced by 4 attributes:
1. border
2. bordercolor
3. cellpadding
4. cellspacing

10
 The Border Attribute
• Draws a border round the table and
individual cells.
• Takes value equal to border weight in
pixels.
• Example:
<table border=”2”>

11
 2. bordercolor Attribute
• Sets the border color.
• Set its value to hexadecimal value or
color name:
<table border=”2” bordercolor=”blue”>
or
<table border=”2”bordercolor=”#FF0000”>

12
 3. Cellspacing Attribute
• Sets the thickness of the internal borders
between cells:
<table border=”2” cellspacing=”5”>

13
 4. Cellpadding Attribute
• Defines the amount of empty space
between the border of a cell and the
content inside it:
• Example:
<table border=”2” cellpadding=”10”>

14
 Defining Dimensions for a Table

• Add the width and height attributes.

• Example:
• <table width=”400” height=“200”>
or:
• <table width=”80%” height=“40%”>
• N/B:
• Left to its own, the dimensions of the overall
table or individual cell is governed by the
content placed within it
15
 Setting the Dimensions of an Entire Row

• add width/height attributes to the <tr> tag:

• <tr width=“200” >
• <tr height=“200” >
• <tr width=“200” height=“200” >

16
 Setting the Dimensions of an individual Cell

• add the width/height attribute to the <td>

tag:
• <td width=”20%”>Dress</td>
Or
• <td height=”20%”>Dress</td>
Or
<td width=”20%” height=“40%”>Dress</td>

17
 Positioning Content Horizontally
• Add the align attribute in the <td> tag.
• Takes values:
– Left - Aligns cell contents to the left. (Default
alignment).
– Right - Aligns cell contents to the right.
– Center - Aligns cell contents to the center.
– Justify - Also aligns the cell’s contents to the
left

18
 Positioning Content Horizontally cont’d

Example:
<td align="left">Dress</td>
<td align=”right”>10000</td>

19
 Cell Spanning

Item Price Quantity Total

Description

1. Dress 10000 3 30,000

2. Shirt 400 2 800
3. Trouser 1000 1 1000
Grand Total 31,800

20
 Cell Spanning cont’d
• A single cell can span multiple columns or rows.
• To span a cell across columns, use the colspan
attribute.
• Example1:
• <tr>
• <td colspan=”3”>Grand Total</td>
• </tr>
• To span a cell across rows, add the rowspan
attribute.
21
 Adding Captions
Budget

Item Description Price Quantity Total

1. Dress 10000 3 30,000

2. Shirt 400 2 800

3. Trouser 1000 1 1000

Grand Total 31,800

22
 Adding Captions cont’d
• Use the <caption> </caption> element just
above the first row of cells.
• Example
• <table>
• <caption> Budget</caption>
• <tr>
• …………….
• </tr>

23
Defining a Background Color of the Entire
Table
• Add the bgcolor attribute to <table> tag.
• Example:
<table bgcolor=”grey”>

24
 Defining the Background color for an Single
Row

• Apply the bgcolor attribute to the <tr>

tag.
• Example:
<tr bgcolor=”pink”>

25
 Defining Background Color for an Individual
Cell

• Add bgcolor attribute to the <td> or <th>

tag.
• Example:
<td bgcolor=”pink”>
<th bgcolor=”pink”>

26
 Defining a background image for a
table
• Add the background attribute to the
<table> tag.
• For example:
• <table
background=”y2site/biographies/mu
sicians/images/bg.gif”>

27
 Defining Background Image for a
Single Row
• Apply the background attribute to
the <tr> tag.
• Example:
• <tr background=”images/bg.gif”>

28
 Setting Background Image for a
Single cell
• Apply background attribute to the
<td> or <th> tag:
• <td background=”images/bg.gif”>
• <th background=”images/bg.gif”>

29
 Nesting Tables
• Placing a table inside another table.

a b
1
c d
3 4

30