Scribd
Upload
34 views3 pages

Chapter 6 - Table Tags

Uploaded by

solographicdesigner.2002
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views3 pages

Chapter 6 - Table Tags

Uploaded by

solographicdesigner.2002
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Chapter 6: Table Tags

HTML Table:
HTML table tag is used to display data in tabular form (row * column). There can be many columns in
a row. We can create a table to display data in tabular form, using <table> element, with the help of
<tr> , <td>, and <th> elements. In Each table, table row is defined by <tr> tag, table header is defined
by <th>, and table data is defined by <td> tags. HTML tables are used to manage the layout of the
page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to
use the div tag over the table to manage the layout of the page .

Tag Description

<Table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

S
<tbody>

<thead>

<tfoot>

<caption>
It is used to group the body content in a table.

It is used to group the header content in a table.

It is used to group the footer content in a table.

It is used to give caption to table


IIC
<colgroup> The <colgroup> element is used to style specific
columns of a table.

<col> Each group is specified with a <col> element.

Example:
<table>
<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>60</td>
</tr>
<tr>
<td>James</td>
<td>William</td>
<td>80</td>
</tr>
<tr>
<td>Swati</td>

INDIAN INSTITUTE OF COMPUTER SCIENCE 1


<td>Sironi</td
><td>82</td>
</tr>
<tr>
<td>Chetna</td>
<td>Singh</td>
<td>72</td>
</tr>
</table>

Table Attributes:
1) Border Attribute: You can use the border attribute of table tag in HTML to specify the
border.
Example:
<table border="1">
2) Cell Padding and cell spacing: There are two attributes called cellpadding and
cellspacing which you will use to adjust the white space in your table cells. The cellspacing
attribute defines space between table cells, while cellpadding represents the distance

S
Example:
between cell borders and the content within a cell.

<table border = "1" cellpadding = "5" cellspacing = "5">

3) Colspan and rowspan attribute: You will use the colspan attribute if you want to
merge two or more columns into a single column. Similarly you will use rowspan if you want
IIC
to merge two or more rows.
Example:
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>

4) Bgcolor: You can set background colour for the whole table or just for one cell.
Example:
<table border = "1" bordercolor = "green" bgcolor = "yellow">

5) Height and width attribute: You can set a table width and height using width and
height attributes. You can specify table width or height in terms of pixels or in terms of
percentage of available screen area.
Example:
<table border = "1" width = "400" height = "150">

INDIAN INSTITUTE OF COMPUTER SCIENCE 2


6) Caption attribute: The caption tag will serve as a title or explanation for the table and it
shows up at the top of the table.
Example:
<table border = "1" width = "100%">
<caption>This is the caption</caption>

7) Colgroup element:
Example:
<table>
<colgroup>
<col span="2" bgcolor=”red”>
</colgroup>

S
IIC

INDIAN INSTITUTE OF COMPUTER SCIENCE 3

You might also like