HTML Table
In html <table> tag is used to define a table. Table is created to store data. <tr>, <td>, and <th> elements are used to define table row, table data and table heading in html.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 div tag over table to manage the layout of the page .
HTML Table Tags
|
Html Tag |
Function and descriptions |
|
<table> |
It defines a table in html |
|
<tr> |
It defines a row in a html table |
|
<th> |
It defines a table heading cell. |
|
<td> |
It defines a table data cell |
|
<caption> |
It defines the table caption. |
|
<colgroup> |
It specifies a group of one or more columns in a table for formatting. |
|
<col> |
It is used with <colgroup> element to specify column properties for
each column. |
|
<tbody> |
It is used to group the body content in a table. |
|
<thead> |
It is used to group the header content in a table. |
|
<tfooter> |
It is used to group the footer content in a table. |
Syntax: <table attribute1= “value” attribute2=”value” …….>
<TH> and <TD> tags:
<TR> and <TD> tags are used to defined table heading and table data. Some attributes of <TH> and <TD> tags are as:
Examples
Syntax:
<th colspan =”colsno” rowspan = “rowsno” width = “value” Height = “Value”>Examples
<!doctype html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2> Example of table without border</h2>
<table>
<tr>
<td>1 </td>
<td>Anita</td>
<td>Karmacharya</td>
<td>Kathmandu</Td>
</tr>
<tr>
<td>2</td>
<td>Sandip</td>
<td>Acharya</td>
<td>Pokhara</td>
</tr>
<tr>
<td>3</td>
<td>Edutech</td>
<td>Khem</td>
<td>Pokhara</td>
</tr>
</table>
</body>
</html>
Note: The <TR> start tag and the </TR> end tag encloses several <TD> and </TD> tags.
Output:
<!doctype html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2> Example of table with border</h2>
<table border = 2>
<tr>
<td>1 </td>
<td>Anita</td>
<td>Karmacharya</td>
<td>Kathmandu</Td>
</tr>
<tr>
<td>2</td>
<td>Sandip</td>
<td>Acharya</td>
<td>Pokhara</td>
</tr>
<tr>
<td>3</td>
<td>Edutech</td>
<td>Khem</td>
<td>Pokhara</td>
</tr>
</table>
</body>
</html>
The BORDER=”2” instructs the browser to display two pixel border.
<!doctype html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2> Example of table with border</h2>
<table border = 2>
<tr>
<th>S.N.</th>
<th>First name</th>
<th>Last Name</th>
<th>Address</Th>
</tr>
<tr>
<td>1 </td>
<td>Anita</td>
<td>Karmacharya</td>
<td>Kathmandu</Td>
</tr>
<tr>
<td>2</td>
<td>Sandip</td>
<td>Acharya</td>
<td>Pokhara</td>
</tr>
<tr>
<td>3</td>
<td>Edutech</td>
<td>Khem</td>
<td>Pokhara</td>
</tr>
</table>
</body>
</html>
Width and property will display the width and height of the cell in the table.
<!doctype html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2> Example of table with border</h2>
<table border = 2 width = 60% height = 250 px>
<tr>
<th>S.N.</th>
<th>First name</th>
<th>Last Name</th>
<th>Address</Th>
</tr>
<tr>
<td>1 </td>
<td>Anita</td>
<td>Karmacharya</td>
<td>Kathmandu</Td>
</tr>
<tr>
<td>2</td>
<td>Sandip</td>
<td>Acharya</td>
<td>Pokhara</td>
</tr>
<tr>
<td>3</td>
<td>Edutech</td>
<td>Khem</td>
<td>Pokhara</td>
</tr>
</table>
</body>
</html>
Example: <TABLE BORDER="2" CELLSPACING="5" CELLPADDING="5">
The CELLSPACING attribute increases the thickness of the border of each cell.
<!doctype html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2> Example of table with border</h2>
<TABLE BORDER="2" CELLSPACING="7" CELLPADDING="5">
<tr>
<th>S.N.</th>
<th>First name</th>
<th>Last Name</th>
<th>Address</Th>
</tr>
<tr>
<td>1 </td>
<td>Anita</td>
<td>Karmacharya</td>
<td>Kathmandu</Td>
</tr>
<tr>
<td>2</td>
<td>Sandip</td>
<td>Acharya</td>
<td>Pokhara</td>
</tr>
<tr>
<td>3</td>
<td>Edutech</td>
<td>Khem</td>
<td>Pokhara</td>
</tr>
</table>
</body>
</html>
Example: <TABLE BORDER="1" CELLSPACING="6" CELLPADDING="6">
<CAPTION>I. TABLE </CAPTION>
Include <CAPTION ALIGN=”BOTTOM”> to display the caption beneath the table.
Colspan: The COLSPAN is used to merges columns. For example COLSPAN=”4” indicates that 4 cells are merged to become one cell.
Example:
<TABLE BORDER="1" CELLSPACING="6" CELLPADDING="6" WIDTH="80%">
<CAPTION>I. TABLE </CAPTION>
<TR>
<TH COLSPAN="4">S T U D E N T R E P O R T</TH> </TR>
Rows span:
The ROWSPAN attribute is used to merge the number of rows.
Example:
<!doctype html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2> Example of table with border</h2>
<TABLE BORDER="2">
<tr>
<th rowspan =2>S.N.</th>
<th rowspan =2>First Name</th>
<th rowspan =2>First Name</th>
<th rowspan= 2>Address</Th>
<th colspan = 2>Subject</th>
</tr>
<tr>
<th>Computer</th>
<th>Science</th>
</tr>
<tr>
<td>1 </td>
<td>Anita</td>
<td>Karmacharya</td>
<td>Kathmandu</Td>
<td>45</td>
<td>65</td>
</tr>
<tr>
<td>2</td>
<td>Sandip</td>
<td>Acharya</td>
<td>Pokhara</td>
<td>35</td>
<td>45</td>
</tr>
<tr>
<td>3</td>
<td>Edutech</td>
<td>Khem</td>
<td>Pokhara</td>
<td>40</td>
<td>60</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2> Example of table with border</h2>
<TABLE BORDER="2" >
<tr bgcolor = red> <!—specify row background color to red-->
<th rowspan =2><FONT COLOR ="white">S.N.</FONT></th>
<!—specify font color in white for S.N. -->
<th rowspan =2>First Name</th>
<th rowspan =2>First Name</th>
<th rowspan= 2>Address</Th>
<th colspan = 2>Subject</th>
</tr>
<tr bgcolor = blue>
<th>Computer</th>
<th>Science</th>
</tr>
<tr>
<td>1 </td>
<td>Anita</td>
<td>Karmacharya</td>
<td>Kathmandu</Td>
<td>45</td>
<td>65</td>
</tr>
<tr>
<td>2</td>
<td>Sandip</td>
<td>Acharya</td>
<td>Pokhara</td>
<td>35</td>
<td>45</td>
</tr>
<tr>
<td>3</td>
<td>Edutech</td>
<td>Khem</td>
<td>Pokhara</td>
<td>40</td>
<td>60</td>
</tr>
</table>
</body>
</html>
Output:
;
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2> Example of table without border</h2>
<table>
<tr>
<td>1 </td>
<td>Anita</td>
<td>Karmacharya</td>
<td>Kathmandu</Td>
</tr>
<tr>
<td>2</td>
<td>Sandip</td>
<td>Acharya</td>
<td>Pokhara</td>
</tr>
<tr>
<td>3</td>
<td>Edutech</td>
<td>Khem</td>
<td>Pokhara</td>
</tr>
</table>
</body>
</html>
Note: The <TR> start tag and the </TR> end tag encloses several <TD> and </TD> tags.
Output:
Adding a Border:
By default, the table does not contain a border. To include a border to the table, specify a BORDER attribute inside the TABLE tag.<!doctype html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2> Example of table with border</h2>
<table border = 2>
<tr>
<td>1 </td>
<td>Anita</td>
<td>Karmacharya</td>
<td>Kathmandu</Td>
</tr>
<tr>
<td>2</td>
<td>Sandip</td>
<td>Acharya</td>
<td>Pokhara</td>
</tr>
<tr>
<td>3</td>
<td>Edutech</td>
<td>Khem</td>
<td>Pokhara</td>
</tr>
</table>
</body>
</html>
Output:
The BORDER=”2” instructs the browser to display two pixel border.
Adding Column Headings:
<th> tag is used to add column heading in html.<!doctype html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2> Example of table with border</h2>
<table border = 2>
<tr>
<th>S.N.</th>
<th>First name</th>
<th>Last Name</th>
<th>Address</Th>
</tr>
<tr>
<td>1 </td>
<td>Anita</td>
<td>Karmacharya</td>
<td>Kathmandu</Td>
</tr>
<tr>
<td>2</td>
<td>Sandip</td>
<td>Acharya</td>
<td>Pokhara</td>
</tr>
<tr>
<td>3</td>
<td>Edutech</td>
<td>Khem</td>
<td>Pokhara</td>
</tr>
</table>
</body>
</html>
Output:
Adding width and height property in table
Width and property will display the width and height of the cell in the table.
<!doctype html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2> Example of table with border</h2>
<table border = 2 width = 60% height = 250 px>
<tr>
<th>S.N.</th>
<th>First name</th>
<th>Last Name</th>
<th>Address</Th>
</tr>
<tr>
<td>1 </td>
<td>Anita</td>
<td>Karmacharya</td>
<td>Kathmandu</Td>
</tr>
<tr>
<td>2</td>
<td>Sandip</td>
<td>Acharya</td>
<td>Pokhara</td>
</tr>
<tr>
<td>3</td>
<td>Edutech</td>
<td>Khem</td>
<td>Pokhara</td>
</tr>
</table>
</body>
</html>
Output:
Adding Spacing and Padding :
The CELLSPACING attribute adds space between the cells and the CELLPADDING attribute adds space within each cell.Example: <TABLE BORDER="2" CELLSPACING="5" CELLPADDING="5">
The CELLSPACING attribute increases the thickness of the border of each cell.
<!doctype html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2> Example of table with border</h2>
<TABLE BORDER="2" CELLSPACING="7" CELLPADDING="5">
<tr>
<th>S.N.</th>
<th>First name</th>
<th>Last Name</th>
<th>Address</Th>
</tr>
<tr>
<td>1 </td>
<td>Anita</td>
<td>Karmacharya</td>
<td>Kathmandu</Td>
</tr>
<tr>
<td>2</td>
<td>Sandip</td>
<td>Acharya</td>
<td>Pokhara</td>
</tr>
<tr>
<td>3</td>
<td>Edutech</td>
<td>Khem</td>
<td>Pokhara</td>
</tr>
</table>
</body>
</html>
Output:
Adding a Caption :
The CAPTION tag is used to insert a caption for the table.Example: <TABLE BORDER="1" CELLSPACING="6" CELLPADDING="6">
<CAPTION>I. TABLE </CAPTION>
Include <CAPTION ALIGN=”BOTTOM”> to display the caption beneath the table.
Colspan: The COLSPAN is used to merges columns. For example COLSPAN=”4” indicates that 4 cells are merged to become one cell.
Example:
<TABLE BORDER="1" CELLSPACING="6" CELLPADDING="6" WIDTH="80%">
<CAPTION>I. TABLE </CAPTION>
<TR>
<TH COLSPAN="4">S T U D E N T R E P O R T</TH> </TR>
Rows span:
The ROWSPAN attribute is used to merge the number of rows.
Example:
<!doctype html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2> Example of table with border</h2>
<TABLE BORDER="2">
<tr>
<th rowspan =2>S.N.</th>
<th rowspan =2>First Name</th>
<th rowspan =2>First Name</th>
<th rowspan= 2>Address</Th>
<th colspan = 2>Subject</th>
</tr>
<tr>
<th>Computer</th>
<th>Science</th>
</tr>
<tr>
<td>1 </td>
<td>Anita</td>
<td>Karmacharya</td>
<td>Kathmandu</Td>
<td>45</td>
<td>65</td>
</tr>
<tr>
<td>2</td>
<td>Sandip</td>
<td>Acharya</td>
<td>Pokhara</td>
<td>35</td>
<td>45</td>
</tr>
<tr>
<td>3</td>
<td>Edutech</td>
<td>Khem</td>
<td>Pokhara</td>
<td>40</td>
<td>60</td>
</tr>
</table>
</body>
</html>
Output:
Assigning Background Colors:
You can set a background color to an entire table, a row within a table, or a single cell.<!doctype html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2> Example of table with border</h2>
<TABLE BORDER="2" >
<tr bgcolor = red> <!—specify row background color to red-->
<th rowspan =2><FONT COLOR ="white">S.N.</FONT></th>
<!—specify font color in white for S.N. -->
<th rowspan =2>First Name</th>
<th rowspan =2>First Name</th>
<th rowspan= 2>Address</Th>
<th colspan = 2>Subject</th>
</tr>
<tr bgcolor = blue>
<th>Computer</th>
<th>Science</th>
</tr>
<tr>
<td>1 </td>
<td>Anita</td>
<td>Karmacharya</td>
<td>Kathmandu</Td>
<td>45</td>
<td>65</td>
</tr>
<tr>
<td>2</td>
<td>Sandip</td>
<td>Acharya</td>
<td>Pokhara</td>
<td>35</td>
<td>45</td>
</tr>
<tr>
<td>3</td>
<td>Edutech</td>
<td>Khem</td>
<td>Pokhara</td>
<td>40</td>
<td>60</td>
</tr>
</table>
</body>
</html>
Output:
;
nice
ReplyDeleteexcellent work sir
ReplyDelete