Scribd
Upload
390 views

Tables in HTML

The document discusses HTML tables and their tags. HTML tables allow data to be organized into rows and columns using <table>, <tr>, <th>, and <td> tags. <table> defines an HTML table, <tr> defines a table row, <th> defines a table header, and <td> defines a table data cell. Additional tags like <caption>, <colspan>, and <rowspan> provide table captions and merge columns/rows. Attributes specify table styling, formatting, and dimensions.

Uploaded by

Wanjiru Ian Sampaiyo Maloi
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
390 views

Tables in HTML

The document discusses HTML tables and their tags. HTML tables allow data to be organized into rows and columns using <table>, <tr>, <th>, and <td> tags. <table> defines an HTML table, <tr> defines a table row, <th> defines a table header, and <td> defines a table data cell. Additional tags like <caption>, <colspan>, and <rowspan> provide table captions and merge columns/rows. Attributes specify table styling, formatting, and dimensions.

Uploaded by

Wanjiru Ian Sampaiyo Maloi
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/ 12

HTML TABLES

The HTML table provides a way to derive or define the data such as text, images, links etc in
terms of rows and columns of cells. The HTML tables can be created by using <table> tag. By
default, the table data is left aligned. In this topic, we are going to learn about HTML Table
Tags.

The table can be created by using <th>, <td>, and <tr> tags.
 The <th> tag defines a heading for the table.
 The <td> tag specifies the table data cells which is used to make the column.
 The <tr> tag specifies the table rows which is used to make a row.
The table data can be structured within <table>content of the table</table> with numerous table
elements.

Syntax
<table>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
</tr>
<tr>
<td>Data Cell 1</td>
<td>Data Cell 2</td>
</tr>
<tr>
<td>Data Cell 3</td>
<td>Data Cell 4</td>
</tr>
</table>

Table Heading 1 Table Heading 2


Data Cell 1 Data Cell 2
Data Cell 3 Data Cell 4

1
Examples of HTML Table Tags
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

It will display the following output:

2
Table Caption
The idea of a caption is to provide a consice description about the data presented in
a table or its purpose, introducing context and making it significantly easier to
understand.

The caption for the table can be specified by using the <caption> tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<caption>This is Table Caption</caption>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

The above code will display the below output:

3
Table Cell Spacing
The space of the table cells can be defined by using the cellspacing attribute.
The cellspacing attribute specifies the space between table cells.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellspacing = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

The above code will display the following output:

4
Table Cell Padding
The padding of the table cells can be defined by using the cellpadding
attribute. The cellpadding attribute provides distance between table cell
border and data.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellpadding = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

The above code will display the below output:

5
Column and Row Span Attributes
The two or more table rows can be merged into a single row by using
rowspan attribute and table columns can be merged into a single column by
using a colspan attribute.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td rowspan = "2">Row One</td>
<td>Row Two</td>
<td>Row Three</td>
</tr>
<tr>
<td>Row Four</td>
<td>Row Five</td>
</tr>
<tr>
<td colspan = "3">Row Six</td>
</tr>
</table>
</body>

The code will display the following output:


6
Background for Table
The background of the table can be created by using the bgcolor attribute.
The table cell border can be specified by using the border-color attribute.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" bordercolor = "red" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Execute the above code and it will display the below output:

7
7. Height and Width of the Table
The height and width of the table can be set by using width and height
attributes.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" width = "500" height = "250" bgcolor =
"lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

The above code will display the following output:

8
Nested Tables
You can use one table inside another table is called a nested table.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" width = "500" height = "250">
<tr>
<td>
<table border = "1" width = "500" height = "250" bgcolor =
"lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>

9
<td>England</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

The above code will display the following output:

<!DOCTYPE html>
<html>
<head>
<title>
Example of Nested Table
</title>
</head>
<body>
<table border="4" bordercolor="green">
<tr>
<td> It is a 1st Cell of 1st row in the 1st Table. </td>
<td> It is a 2nd Cell of 1st row in the 1st Table.

<table border="6" bordercolor="blue">


<tr>
<td> It is a 1st Cell of 1st row in the 2nd Table. </td>
</tr>

10
<tr>
<td> It is a 2nd Cell of 2nd row in the 2nd Table. </td></tr>
</table>
</td>
</tr>
<tr>
<td> It is a 3rd Cell of 2nd row in the 1st Table. </td>
<td> It is a 4th Cell of 2nd row in the 1st Table. </td>
</tr>
</table>
</body>
</html>

Attributes of The Table


 align: This attribute provides the alignment of content inside an element.
 bgcolor: This attribute specifies the background color for the table.
 border: This attribute specifies the border for the table cells.
 cellpadding: This attribute displays the padding between table cells and table
content.
 cellspacing: This attribute displays the space between table cells.
 frame: It specifies which parts of the outside borders are visible.
 width: This attribute tells the width of the table.
 height: This attribute specifies the height of the table.
 Colspan combines selected cells in a row into one big row
 Rowspan combines the selected cells in a row into one big column

11
12

You might also like