Table in HTML

Presented By:Er.Sudan Prajapati

• There are several types of information that need to be displayed in
a grid or table. For example: sports results, stock reports, train
time-tables etc.
• When representing information in a table, we need to think in
terms of a grid made up of rows and columns (a bit like a
spreadsheet).
• Hence, a table is a 2-dimensional box which consists of rows and
columns.
• Table is intended for displaying data in columns on web pages.
• Table allows web authors to arrange data like text, images, links,
other tables etc. into the row and column.
 Table

Columns

Rows

Combination of rows and columns

Fig.1: Table used in a website.
 Basic Table Structure
• Tables are defined with the <table> tag.
• The contents of the table are written out row by row.
• The start of each row is indicated using the opening <tr> tag where
“tr” represents table row.
• It is followed by one or more <td> elements.
• <td> element is used to represent each cell of a table where “td”
stands for table data.
• At the end of a cell closing </td> is used.
• Similarly, at the end of the row, closing </tr> tag is used.
• Hence, tables are divided into table rows with the <tr> tag
and table data with the <td> tag.
Use of Table tag
 <th> elements
• The <th> element is used just like the <td> element but its purpose
is to represent the heading for either a column or a row.
• The th stands for table heading.
• Using <th> elements for headings helps people who use
screen readers, improves the ability for search engines to
index your pages, and also enables you to control the
appearance of tables better when you start to use CSS.
<th> elements
 <caption> tag
• A table must have a caption to understand.
• The <caption> tag defines a table caption.
• The <caption> tag must be inserted immediately after the <table>
tag.
• <caption> tag has following attributes:
Attributes Value
Align Left
Right
Top
Bottom

*Note: You can specify only one caption per table.

 <caption> tag

Code Result
 Long Tables
• There are three elements that help distinguish between the main
content of the table and the first and last rows (which can contain
different content).
• These elements help people who use screen readers and also allow
you to style these sections in a different manner than the rest of
the table (as you will see when you learn about CSS).
Tags Values
<thead> The heading of the table is placed.

<tbody> Body of the table is placed.

<tfoot> The footer of the table is placed.

*Note:- By default, browsers rarely treat the content of these elements any differently than other elements however
designers often use CSS styles to change their appearance.
 Attributes of table
1. Align
• Horizontal alignment is controlled by the align attributes.
• It can be set to left, right, center, justify.

2. V-align
• It controls the vertical alignment of cell content.
• It accepts the values : top, middle or bottom

3.Width
• It sets a width of specific number of pixels of available screen
width.
 Attributes of table
4.Cell padding
• It specifies the space between the cell content and its borders.

5.Cell spacing
• It controls the spacing between adjacent cells.

6.Border
• It controls the border to be placed around the table.
 Attributes of table
7.Colspan
• Sometimes we may need the entries in a table to stretch across
more than one column.

• This attribute inside <th> or <td> tag instruct the browser to

make the cell defined by the tag take up more than one
column.
Example of Colspan
 Attributes of table
8.Rowspan
• We may also need entries in a table to stretch down across
more than one row.

• The rowspan attribute can be used on a <th> or <td> element

to indicate how many rows a cell should span down the table.

• This attribute works in the same way as the colspan attribute

except that it allows a cell to take up more than one row.
Example of Rowspan
 Using table attributes
<table border="1" width="50%" align="center" cellspacing="0" cellpadding="2">
<caption align="bottom">Time table and Fare List</caption><thead>
<tr>
<th rowspan="2" valign="top">Bus</th>
<th rowspan="2" valign="top">Place</th>
<th rowspan="2" valign="top">Destination</th>
<th colspan="2" >Time</th>
<th rowspan="2" valign="top">Fare</th>
</tr>
<tr>
<th>Arrival</th>
<th>Departure</th>
</tr>
</thead>
 Using table attributes
<tbody align="center"> <td>Rs.800</td>
<tr> </tr>
<td>Golden</td> <tr>
<td>Hetauda</td> <td>Kantipur</td>
<td>KTM</td> <td>Chitwan</td>
<td>7:30 am</td> <td>KTM</td>
<td>5:00 pm</td> <td>8:00 am</td>
<td>Rs.600</td> <td>4:00 pm</td>
</tr> <td>Rs.500</td>
<tr> </tr>
<td>Green land</td> </tbody>
<td>Pokhara</td> </table>
<td>KTM</td>
<td>8:30 am</td>
<td>6:00 pm</td>
Output
 Thank you !!!
Any Queries ???