Web Engineering

Lecture 04

2
Tables in HTML

3
Summary of the previous lecture
• Adding images to web page
• Using images as links
• Adding video to web page
• Adding audio o web page

4
Outline
• How to create tables
• Page lay-out using tables

5
1. Creating HTML tables
• Tables display information in rows and
columns
• Tables are commonly used to display all
manner of data that fits in a grid such as train
schedules, television listings, financial
reports etc.

6
 1. Creating HTML tables
• An HTML table consists of the <table> element and one
or more elements like </table>
• <th>
• <tr>
• <td>

• Tables are divided into table rows with the <tr> tag.
• Table rows are divided into table data with the <td> tag.
• A table row can also be divided into table headings with
the <th> tag.
7
1. Creating HTML tables…
• In HTML <table> tag is used to start a table
while </table> tag indicates the end of the table
<table>
Table Structure
</table>
• <tr> tag starts a row of the table and </tr> ends
the row
• <td> is used to create a cell inside the row while
</td> ends the cell

8
1. Creating HTML tables…
• The contents of the cell are written between
<td> and </td> tags

• <th> tag is used to declare the cell of the

heading row of the table

9
1. Creating HTML tables…
• An HTML Table with a Border Attribute

• If you do not specify a border for the table, it

will be displayed without borders.

• A border can be added using the border

attribute:

• <table border="1“>
10
 1. Creating HTML tables…
<table border=“1”>
<tr>
Name Registration No.
<td> Name </td>
<td> Registration No. </td> Ali FA13-BCS-001
</tr>
<tr>
<td>Ali</td>
<td>FA13-BCS-001</td>
</tr>
</table>
11
1. Creating HTML tables…

12
1. Creating HTML tables…

13
1.1 Table Attributes
• Table level attributes
• Row level attributes
• Cell level attributes

14
1.1.1 Table Attributes
• The Border Attribute: Indicates the presence of
the border around the table
– <table border=“1”>
•The align Attribute:
– <table align= “center”>
– Other values for align are
» Center
» Left
» right
15
1.1.1 Table Attributes
•The bgcolor Attribute: sets the background
color of the table
– <table bgcolor=“gray”>

•The background Attribute: sets the specified

image at the background of the table
– <table background=“image-title”>

16
1.1.1 Table Attributes…
• The height and width Attributes:

• The cellpadding Attribute:

– The cell padding attribute is used to create a gap
between the edges of a cell and its contents
– <table cellpadding=“50”>

17
1.1.1 Table Attributes…
• The height and width Attributes:

• The cellspacing Attribute:

– The cellspacing attribute is used to create a space
between the borders of each cell

18
1.1.1 Table Attributes…

19
1.1.1 Table Attributes…

cell spacing
cell padding
Height

Width

20
1.1.1 Table Attributes…
• Differences Between HTML 4.01 and HTML5
The "align", "bgcolor", "cellpadding",
"cellspacing", "frame", "rules", "summary", and
"width" attributes are not supported in HTML5.

21
1.1.2 Row level attributes
• The align Attribute:
Aligns content of the row
– <tr align=“center, right or left”>
• The bgcolor Attribute:
Apply background color to row
• <tr bgcolor=“gray”>
• The background Attribute:
Adds image as the background of row
• <tr background=“image-name”>

22
1.1.2 Row level attributes
• The height Attributes:
• Change height on table row
• <tr height=“20” >
• The width Attributes:
• Change width of the row
• <tr widht=“20”>
• The valign Attributes:
• Changes row vertical alignment
• <tr valign=“top, middle or bottom”>

23
1.1.2 Row level attributes…

24
1.1.2 Row level attributes…

Vertical Align
Row Height

25
1.1.3 Cell level attributes
• The align Attribute:
– <td align=“center, right or left”>

• The bgcolor Attribute:

• The height and width Attributes:
• The valign Attributes:

26
1.1.3 Cell level attributes
• The rowspan Attributes:
• used when a cell should span across more than
one rows

• The colspan Attribute:

• used when a cell should span across more than
one column

27
 1.1.3 Cell level attributes…
<table border=“1”>
<tr>
<td rowspan=“2”>Name</td>
<td colspan=“2”>Subjects</td> Subjects
</tr> Name
<tr> OOP DB
<td >OOP</td> ALi 75 80
<td >DB</td>
</tr>
<tr>
<td >ALi</td>
<td >75</td>
<td >80</td>
</tr>
</table> 28
1.2 Creating HTML tables Caption
• An HTML Table With a Caption

• To add a caption to a table, use

the <caption> tag:

29
1.2 Adding caption to the table
• <caption> tag is used to add a caption of the
table
• We usually add caption before the first row
of the table

30
1.2 Creating HTML tables Caption
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
</tr>
<tr>
<td>January</td>
</tr>
</table>

31
1.2 Adding caption to the table…

32
1.2 Adding caption to the table…

Caption

33
1.3 Creating HTML tables - id attribute

A Special Style for One Table

To define a special style for a special table, add an id
attribute to the table:

34
2. Page Layout using Tables
• We can use tables to define the structure of
the web page

35
2. Page Layout using Tables
Header

Links

Body

Footer

36
 2. Page Layout using Tables…
Header

Body and links

Footer

Example: Step 1 (Structure of the page)

37
2. Page Layout using Tables…

Example: Step 1 (Structure of the page)

38
2. Page Layout using Tables…

Example: Step 2 (Header section)

Adding Logo

Title

39
1.5. Page Layout using Tables…

Example: Step 2 (Header section)

40
 2. Page Layout using Tables…
Links table

Example: Step 3 (Links section)

41
 2. Page Layout using Tables…

Example: Step 3 (Links section)

42
 2. Page Layout using Tables…

Example: Step 4 (body section)

43
 2. Page Layout using Tables…
Footer

Example: Step 5 (footer section)

44
 2. Page Layout using Tables…

Example: Step 5 (footer section)

45
Summary

• Use the HTML <table> element to define a table

• Use the HTML <tr> element to define a table row
• Use the HTML <td> element to define a table data
• Use the HTML <th> element to define a table heading
• Use the HTML <caption> element to define a table caption
• Use the CSS border property to define a border
• Use the CSS padding property to add padding to cells
• Use the CSS text-align property to align cell text
• Use the CSS border-spacing property to set the spacing between cells
• Use the colspan attribute to make a cell span many columns
• Use the rowspan attribute to make a cell span many rows
• Use the id attribute to uniquely define one table

46
Summary

• Creating tables in HTML

• Table attributes
– Table level attributes
– Row level attributes
– Cell level attributes
• Page lay-out using tables

47
THANK YOU