Web Systems and
Web Designing
Technologies
The Islamia University of Bahawalpur
Computer Science
Objectives of the Session
Upon completing this section, you should be able to:
1. Insert a table.
2. Add a table header.
3. Explain a table’s attributes.
Computer Science
Tables
Student Table
Roll No. Name Class
20 Waheed Anwar BSCS
21 Ahmad Hassan BSCS
Computer Science
Table in HTML
The <TABLE></TABLE> element has four
sub-elements:
Table Row<TR></TR>.
Table Header <TH></TH>.
Table Data <TD></TD>.
Caption <CAPTION></CAPTION>.
The table row elements usually contain
table header elements or table data
elements.
Computer Science
TABLE Caption
A table caption allows you to specify a line of
text that will appear centered above or bellow
the table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> Label For My Table
</CAPTION>
The Caption element has one attribute ALIGN
that can be either TOP (Above the table) or
BOTTOM (below the table).
Computer Science
Table Header
Table Header (TH) which represent first
row of the table. Contents of the table
header cells appearing centered and in
bold text.
Table cell data is represented by the TD
(Table Data) element.
Computer Science
HTML Code for Table
<table border="1">
<caption>Student Table</caption>
<thead>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>20</td>
<td>Waheed Anwar</td> Student Table
<td>BSCS</td>
</tr> Roll No Name Class
<tr>
<td>21</td> 20 Waheed Anwar BSCS
<td>Ahmad Hassan</td>
<td>BSCS</td>
</tr> 21 Ahmad Hassan BSCS
</tbody>
</table>
Computer Science
Tables Attributes
BGColor: Browsers support background colors
in a table.
Width: you can specify the table width as an
absolute number of pixels or a percentage of the
document width. You can set the width for the
table cells as well.
Border: You can choose a numerical value for
the border width, which specifies the border in
pixels.
CellSpacing: Cell Spacing represents the space
between cells and is specified in pixels.
Computer Science
Computer Science
Tables Attributes
CellPadding: Cell Padding is the space
between the cell border and the cell
contents and is specified in pixels.
Align: tables can have left, right, or center
alignment.
Computer Science
