CLASS X
COMPUTER APPLICATION
TABLE TAG
Create a Table Using the Tags
Creating a table in HTML involves using several tags to define the table structure and its
contents. Here’s a guide on how to use the <table>, <tr>, <th>, <td>, rowspan,
and colspan attributes to create and customize a table.
1. Basic Table Structure
<table>: Defines the table.
<tr>: Defines a row in the table.
<th>: Defines a header cell, which is bold and centered by default.
<td>: Defines a standard data cell.
2. Using rowspan and colspan Attributes
rowspan: Merges multiple rows into one cell.
colspan: Merges multiple columns into one cell.
Example: Creating a Table
Here’s an example of an HTML table with header cells, data cells, and merged rows and
columns:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<h1>My HTML Table</h1>
<table border="1">
<!-- Table Header -->
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<!-- Table Row 1 -->
<tr>
<td>Row 1, Cell 1</td>
<td colspan="2">Row 1, Cell 2 (spans 2 columns)</td>
</tr>
<!-- Table Row 2 -->
<tr>
<td rowspan="2">Row 2 and 3, Cell 1 (spans 2 rows)</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<!-- Table Row 3 -->
<tr>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
<!-- Table Row 4 -->
<tr>
<td>Row 4, Cell 1</td>
<td>Row 4, Cell 2</td>
<td>Row 4, Cell 3</td>
</tr>
</table>
</body>
</html>
Explanation
1. Table Header:
<th> elements are used for headers. In this example, three header cells are defined in
the first row.
2. Row 1:
The first cell uses <td> with colspan="2", merging two columns into one cell.
3. Row 2 and 3:
The first cell in Row 2 uses rowspan="2", merging it with the cell directly below it in Row
3.
4. Row 4:
Standard cells are used without merging.
