What is a HTML table ?
HTML table allows developers to arrange data into rows and columns in the webpage.
HTML table is a two-dimensional table comprised of rows and columns of cells containing data.
What is the structure of a HTML table ?
1. <table></table> tag defines an HTML table.
2. <caption></caption> tag defines description/purpose of the table.
3. <th></th> tag defines the heading element of the table. By default the elements declared inside will be bold and centered.
4. <tr></tr> tag defines the row of the table.
5. <td></td> tag defines the column of the table.
6. <colgroup></colgroup> tag defines the group of one or more columns in a table for formatting.
7. <col></col> tag defines the element to specify column properties for each column.
What is the use of HTML tables?
For presentation purpose with various text/data information and numerical data in structured format.
Used to compare two or more items in tabular form layout.
In Database tables are used to create database tables..
What are the attributes in table?
Attributes for table listed below,
1. id
2. class
3. rowspan
4. colspan
HTML coding practice online !!!
Click to Learn More about – HTML Tutorial for beginners
1. Simple table creation without border
Examples :
<!DOCTYPE html>
<html>
<head>
<title>Table tag</title>
</head>
<body>
<table>
<caption>Exam Mark Details</caption>
<tr>
<th>Sno</th>
<th>Name</th>
<th>English</th>
<th>Tamil</th>
<th>Maths</th>
<th>Botany</th>
<th>Zoology</th>
<th>History</th>
<th>Geography</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td>Gandhi</td>
<td>89</td>
<td>90</td>
<td>90</td>
<td>35</td>
<td>56</td>
<td>80</td>
<td>67</td>
<td>507/700</td>
</tr>
<tr>
<td>2</td>
<td>Abdul</td>
<td>89</td>
<td>90</td>
<td>100</td>
<td>35</td>
<td>56</td>
<td>100</td>
<td>67</td>
<td>537/700</td>
</tr>
<tr>
<td>3</td>
<td>Tendulkar</td>
<td>89</td>
<td>100</td>
<td>100</td>
<td>35</td>
<td>56</td>
<td>100</td>
<td>67</td>
<td>547/700</td>
</tr>
</table>
</body>
</html>
Output :
2. Table with border.
Examples :
<!DOCTYPE html>
<html>
<head>
<title>Table tag</title>
</head>
<body>
<table border="1px">
<caption>Exam Mark Details</caption>
<tr>
<th>Sno</th>
<th>Name</th>
<th>English</th>
<th>Tamil</th>
<th>Maths</th>
<th>Botany</th>
<th>Zoology</th>
<th>History</th>
<th>Geography</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td>Gandhi</td>
<td>89</td>
<td>90</td>
<td>90</td>
<td>35</td>
<td>56</td>
<td>80</td>
<td>67</td>
<td>507/700</td>
</tr>
<tr>
<td>2</td>
<td>Abdul</td>
<td>89</td>
<td>90</td>
<td>100</td>
<td>35</td>
<td>56</td>
<td>100</td>
<td>67</td>
<td>537/700</td>
</tr>
<tr>
<td>3</td>
<td>Tendulkar</td>
<td>89</td>
<td>100</td>
<td>100</td>
<td>35</td>
<td>56</td>
<td>100</td>
<td>67</td>
<td>547/700</td>
</tr>
</table>
</body>
</html>
Output :
3. Table with id attribute
Examples :
<!DOCTYPE html>
<html>
<head>
<title>Table tag</title>
<style>
#t1{
width:50%;
border:1px solid blue;
}
</style>
</head>
<body>
<table border="" id="t1">
<caption>Exam Mark Details</caption>
<tr>
<th>Sno</th>
<th>Name</th>
<th>English</th>
<th>Tamil</th>
<th>Maths</th>
<th>Botany</th>
<th>Zoology</th>
<th>History</th>
<th>Geography</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td>Gandhi</td>
<td>89</td>
<td>90</td>
<td>90</td>
<td>35</td>
<td>56</td>
<td>80</td>
<td>67</td>
<td>507/700</td>
</tr>
<tr>
<td>2</td>
<td>Abdul</td>
<td>89</td>
<td>90</td>
<td>100</td>
<td>35</td>
<td>56</td>
<td>100</td>
<td>67</td>
<td>537/700</td>
</tr>
<tr>
<td>3</td>
<td>Tendulkar</td>
<td>89</td>
<td>100</td>
<td>100</td>
<td>35</td>
<td>56</td>
<td>100</td>
<td>67</td>
<td>547/700</td>
</tr>
</table>
</body>
</html>
Output :
HTML code for beginners !!!
Click to Learn More about – HTML Tutorial for beginners
4. Table with class attribute
Examples :
<!DOCTYPE html>
<html>
<head>
<title>Table tag</title>
<style>
.t1{
width:50%;
border:1px solid blue;
}
</style>
</head>
<body>
<table border="" class="t1">
<caption>Exam Mark Details</caption>
<tr>
<th>Sno</th>
<th>Name</th>
<th>English</th>
<th>Tamil</th>
<th>Maths</th>
<th>Botany</th>
<th>Zoology</th>
<th>History</th>
<th>Geography</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td>Gandhi</td>
<td>89</td>
<td>90</td>
<td>90</td>
<td>35</td>
<td>56</td>
<td>80</td>
<td>67</td>
<td>507/700</td>
</tr>
<tr>
<td>2</td>
<td>Abdul</td>
<td>89</td>
<td>90</td>
<td>100</td>
<td>35</td>
<td>56</td>
<td>100</td>
<td>67</td>
<td>537/700</td>
</tr>
<tr>
<td>3</td>
<td>Tendulkar</td>
<td>89</td>
<td>100</td>
<td>100</td>
<td>35</td>
<td>56</td>
<td>100</td>
<td>67</td>
<td>547/700</td>
</tr>
</table>
</body>
</html>
Output :
5. Table with rowspan
Examples :
<!DOCTYPE html>
<html>
<head>
<title>Table tag</title>
<style>
.t1{
width:30%;
border:1px solid blue;
}
</style>
</head>
<body>
<table class="t1" border="">
<caption>Mobile Details</caption>
<tr>
<th>Name:</th>
<td>Gandhi</td>
</tr>
<tr>
<th rowspan="4">Telephone:</th>
<td>1234567890</td>
</tr>
<tr>
<td>0987654321</td>
</tr>
<tr>
<td>5432167890</td>
</tr>
<tr>
<td>6789012345</td>
</tr>
</table>
</body>
</html>
Output :
6. Table with colspan
Example :
<!DOCTYPE html>
<html>
<head>
<title>Table tag</title>
<style>
.t1{
width:30%;
border:1px solid blue;
}
</style>
</head>
<body>
<table class="t1" border="">
<tr>
<th>Name</th>
<th colspan="4">Telephone</th>
</tr>
<tr>
<td>MKGandhi</td>
<td>1234567890</td>
<td>0987654321</td>
<td>5432167890</td>
<td>6789054321</td>
</tr>
</table>
</body>
</html>
Output :
