Tables in HTML
HTML tables are used to display data in a structured tabular format, consisting of rows and columns.
Basic Table Structure
| Element | Description |
|---|---|
| <table> | Defines the start of the table. |
| <tr> | Defines a table row. |
| <th> | Defines a header cell in a table row. Text in <th> tags is bold and centered by default. |
| <td> | Defines a standard data cell in a table row. Text in <td> tags is left-aligned by default. |
Attributes of a Table
- border: Specifies the width of the table border.
- cellpadding: Defines the space between the cell content and cell border.
- cellspacing: Defines the space between table cells.
Example
<html>
<head>
<title>Tables in a webpage</title>
</head>
<body>
<style>
table.mytable {
background-color: aqua;
}
tr.top {
background-color: black;
color: white;
}
</style>
<h1>Students list</h1>
<table class="mytable" border="1" cellpadding="10" cellspacing="0" width="500"
height="200px">
<thead>
<tr class="top">
<th>Name</th>
<th>Reg No</th>
<th>Class</th>
<th>div</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abijith</td>
<td>1122</td>
<td>10</td>
<td>A</td>
</tr>
<tr>
<td>Sona</td>
<td>8744</td>
<td>8</td>
<td>B</td>
</tr>
<tr>
<td>Sona</td>
<td>8744</td>
<td>8</td>
<td>B</td>
</tr>
<tr>
<td>Salman</td>
<td>7411</td>
<td>9</td>
<td>A</td>
</tr>
</tbody>
</table>
</body>
</html>
Merging in HTML Tables
<html>
<head>
<title>Merging in HTML Tables</title>
</head>
<body>
<table border="1" width="500" height="300">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td rowspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>