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 div tag over table to manage the layout of the page.
HTML Table Example
Let's see the example of HTML table tag. It output is
shown above.
<table>
<tr><th>First Name</th><th>Last Name</th>
<th>Marks</th></tr>
<tr><td>amam</td><td>Jaiswal</td>
<td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td>
</tr>
<tr>td></ta>black<ta>white</td>
<td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td>
</tr>
</table>
Output:
First_Name Last_Name Marks
aman Jaiswal 60
James William 80
Black white 82
Chetna Singh 62
In the above html table, there are 5 rows and 3
columns = 5* 3 = 15 values.
HTML Table with Border
There are two ways to specify border for HTML
tables.
1. By border attribute of table in HTML
2. By border property in CSS
1) HTML Border attribute
You can use border attribute of table tag in HTML to specify border. But it is not recommended now.
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th>
<th>Marks</th></tr>
<tr><td>aman</td><td>Jaiswal</td>
<td>60</td></tr>
<tr><to>James</td><td>William</td><td>80</td>
</tr>
<tr><td>Black</td><td>white</td>
<td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td>
</tr>
</table>
2) CSS Border property
It is now recommended to use border property of CSS to specify border in table.
<style>
table, th, td {
border: 1px solid black;
</style>
You can collapse all the borders in one border by border-collapse property. It will collapse the border into one.
<style>
table, th, td{
border: 2px solid black:
border-collapse: collapse;}
</style>
HTML Table width:
We can specify the HTML table width using the CSS width property. It can be specify in pixels or percentage. We can adjust our table width as per our requirement. Following is the example to display
table with width.
table{
width: 100%;}
Example
<html>
<head>
<title>table</title>
<style>
table{
border-collapse: collapse;
width: 100%;
}
th.td{
border: 2px solid green;
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>1 header</th>
<th>1 header</th>
<th>1 header</th>
</tr>
<tr>
<td>1 data</td>
<td>1data</tds
<td>1data</td>
</tr>
<tr>
<td>2 data</td>
</tr>
<tr>
<td>3 data</td>
<td>3 data</td>
<td>3 data</td>
</tr>
</table>
.gif)
.gif)
.gif)
.gif)