HTML Table
HTML table is used to define tables on the web page which shows the data in tabular form.
| Name | Email Id | Phone No | Age |
|---|---|---|---|
| Aditi Musunur | abd.happel@autozone-inc.info | (392) 181-8544 | 34 |
| Advitiya Sujeet | garne-endres@progressenergyinc.info | (375) 585-3565 | 23 |
| Alagesan Poduri | ly_cha@progressenergyinc.info | (683) 734-4276 | 45 |
| Amrish Ilyas | yeva.brye@progressenergyinc.info | (791) 729-0692 | 28 |
| Aprativirya Seshan | shgd@gmail.com | (375) 585-3565 | 13 |
| Asvathama Ponnada | maria@gmail.com | (524) 386-5730 | 32 |
| Debasis Sundhararajan | ander@mail.com | (268) 508-9243 | 35 |
| Gopa Trilochana | starstuff@live.com | (950) 926-1612 | 24 |
| Jitendra Choudhary | chance@outlook.com | (950) 926-1612 | 40 |
| Naveen Tikaram | jrkorson@yahoo.ca | (272) 211-7370 | 44 |
The table is divided into Rows and Columns.
Rows are horizontally aligned which contains one or more columns.
Columns are vertically aligned which contains one or more rows.
All the rows and columns come inside <table> tag.
A row is define by <tr> tag.
Column contains table data which are define by <th> tag and <td> tag.
<th> tag is used to define table heading. It makes the text bold which increase the importance of text.
<td> tag is used to define normal table data.
Example:
<tr>
<th>S.No</th>
<th>Courses</th>
</tr>
<tr>
<td>1</td>
<td>HTML</td>
</tr>
<tr>
<td>2</td>
<td>CSS</td>
</tr>
</table>
Run the code to see the effect.
HTML Border Attribute
HTML border attribute is used to give a border to a table.
HTML Border Attribute is defined by border="value" syntax.
Value can be 0,1,2,3 and more.
0 is by default which shows no border.
1,2,3 and more adds the border around the cell (A cell is a block which contains single data in the table).
Example:
<tr>
<th>S.No</th>
<th>Courses</th>
</tr>
<tr>
<td>1</td>
<td>HTML</td>
</tr>
<tr>
<td>2</td>
<td>CSS</td>
</tr>
</table>
Run the code to see the effect.
HTML Colspan Attribute
To extend the one column into several columns we used colspan attribute.
Example:
<tr>
<th colspan="2">Phone No.</th>
</tr>
<tr>
<td>+91 1234567898</td>
<td>+91 1234567897</td>
</tr>
<tr>
<td>+91 1234567896</td>
<td>+91 1234567894</td>
</tr>
</table>
Run the code to see the effect.
HTML Rowspan Attribute
To extend the one row into several rows we used rowspan attribute.
Example:
<tr>
<th rowspan="3">Telephone</th>
<td>+91 1234567898</td>
</tr>
<tr>
<td>+91 1234567896</td>
</tr>
<tr>
<td>+91 1234567894</td>
</tr>
</table>
Run the code to see the effect.
HTML Table Caption
To add a caption (summary of table) to a table, use the <caption> tag.
The <caption> tag must be inserted immediately after the <table> tag.
Example:
<caption>Student Marksheet</caption>
<tr>
<th>S.No</th>
<th>First Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>1</td>
<td>Ram</td>
<td>Math</td>
<td>89</td>
</tr>
<tr>
<td>2</td>
<td>Krishna</td>
<td>Physics</td>
<td>78</td>
</tr>
<tr>
<td>3</td>
<td>Mohan</td>
<td>Chemistry</td>
<td>56</td>
</tr>
</table>
Run the code to see the effect.