HTML Tables: HTML table tags are used to display data in tabular form i.e. row * column. So, we can use the table tag for displaying elements in the table by including some other tags.
HTML Table Tag with Examples – <table>
We should enclose them between <table>….</table>. And we can add the text and align them using <tr., <td>, <th> tags with <table> tag. Each table row is defined with <tr> tag. And the table header is defined with <th> tag. And by default the table headings are bold and centered. While the table data/cell is defined with <td> tag.
Here, we are listing a few tags used in the table.
| Tag | Description |
|---|---|
| <table> | It defines the table |
| <tr> | It defines the row in the table |
| <th> | It defines a header cell in the table |
| <td> | It defines a cell in the table |
| <caption> | It defines the table caption |
| <colgroup> | It specifies a group of one or more columns in table formatting |
| <col> | It is used with 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 |
Example:
<table> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Swapna</td><td>Guru</td><td>80</td></tr> <tr><td>Safia </td><td>Taj</td><td>60</td></tr> <tr><td>Beena</td><td>Jeswal</td><td>82</td></tr> <tr><td>Sindhu</td><td>Aneesha</td><td>72</td></tr> </table>
HTML Table attributes
We have provided some of the HTML table attributes in the below sections. Go through them to get a better idea.
HTML Table with Border
If you want to add a border for your table we should use the border attribute for displaying border preferred by us.
Example:
<table border="2"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Swapna</td><td>Guru</td><td>80</td></tr> <tr><td>Safia </td><td>Taj</td><td>60</td></tr> <tr><td>Beena</td><td>Jeswal</td><td>82</td></tr> <tr><td>Sindhu</td><td>Aneesha</td><td>72</td></tr> </table>
Table CSS Border Property
If you want to specify the border in CSS table. We can use them.
Example:
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse; }
</style>
HTML Table with Cell Padding
We can specify the padding for table header & table data in two ways:
- By cell padding attribute of a table in HTML
- By using the padding property in CSS.
HTML Table with Colspan
If you want to make a cell span with more than one column, you can use the colspan attribute. And also it will divide the cell or row into multiple columns and the number of columns depends on the value of the colspan.
Example: CSS code
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
Example: HTML Code
<table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table>