HTML Tables
HTML table tags are used to arrange data into rows and columns or to shown data in a table form. <table> tag defines an HTML table and it has a closing tag i.e. </table> and you can also add the text and align them using <tr., <td>, <th> tags with <table> tag.
Define an HTML Table:
- <tr> – Defines table row
- <th> – Defines table Header
Here is a simple HTML table Example:
<!DOCTYPE html>
<html>
<body>
<h2> HTML Table: EducateBee</h2>
<table>
<tr>
<th> Firstname: </th>
<th> Lastname: </th>
<th> Course: </th>
</tr>
<tr>
<td>Yashreet</td>
<td>Singh</td>
<td> M.Sc.(Computer Science )</td>
</tr>
<tr>
<td>Akashdeep</td>
<td>Saharan</td>
<td>B.Tech. (CS) </td>
</tr>
<tr>
<td> Jaskiran </td>
<td> Singh </td>
<td> MCA (CS) </td>
</tr>
</table>
</body>
</html>
Output Here:
HTML Table: EducateBee
| Firstname: | Lastname: | Course: |
|---|---|---|
| Yashreet | Singh | M.Sc.(Computer Science ) |
| Akashdeep | Saharan | B.Tech. (CS) |
| Jaskiran | Singh | MCA (CS) |
How to Add a Border in HTML Table (HTML Table attributes)
We will use the CSS border property for adding a border to an HTML table. for example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid red;
}
</style>
</head>
<body>
<h2> HTML Table: (Add a Border) EducateBee </h2>
<table>
<tr>
<th> Firstname: </th>
<th> Lastname: </th>
<th> Course: </th>
</tr>
<tr>
<td>Yashreet</td>
<td>Singh</td>
<td> M.Sc.(Computer Science )</td>
</tr>
<tr>
<td>Akashdeep</td>
<td>Saharan</td>
<td>B.Tech. (CS) </td>
</tr>
<tr>
<td> Jaskiran </td>
<td> Singh </td>
<td> MCA (CS) </td>
</tr>
</table>
</body>
</html>
Output Here:
HTML Table: (Add a Border) EducateBee
| Firstname: | Lastname: | Course: |
|---|---|---|
| Yashreet | Singh | M.Sc.(Computer Science ) |
| Akashdeep | Saharan | B.Tech. (CS) |
| Jaskiran | Singh | MCA (CS) |
HTML Table with Colspan
It divides the cell or row into multiple columns and the number of columns. colspan=”value” attribute is used for Table Colspan.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid red;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>HTML Table with Colspan </h2>
<table>
<tr>
<th>Name</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<td> Yashpreet Singh </td>
<td> 123467890 </td>
<td> 9876543210 </td>
</tr>
</table>
</body>
</html>
Output Here:
HTML Table with Colspan
| Name | Contact | |
|---|---|---|
| Yashpreet Singh | 123467890 | 9876543210 |
HTML Table with Rawspan
It divides the cell or row into multiple rows and the number of rows. rawspan=”value” attribute is used for Table Rawspan.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>HTML Rawspan: EducateBee </h2>
<table>
<tr>
<th>Name:</th>
<td> Yashpreet Singh </td>
</tr>
<tr>
<th rowspan="2">Contact:</th>
<td>9856896558</td>
</tr>
<tr>
<td>784512639</td>
</tr>
</table>
</body>
</html>
Output Here:
HTML Rawspan: EducateBee
| Name: | Yashpreet Singh |
|---|---|
| Contact: | 9856896558 |
| 784512639 |
List of tags that are used in the table.
| S.N. | Tags | Description |
|---|---|---|
| 1. | <table> | defines the table |
| 2. | <tr> | defines the row in the table |
| 3. | <th> | defines a header cell in the table |
| 4. | <td> | defines a cell in the table |
| 5. | <caption> | defines the table caption |
| 6. | <colgroup> | specifies a group of one or more columns in table formatting |
| 7. | <col> | specifies column properties for each column |
| 8. | <tbody> | groups the body content in a table |
| 9. | <thead> | groups the header content in a table |
| 10. | <tfooter> | groups the footer content in a table |
HTML Comment Tags