HTML Tables

Learn how to create and style tables in HTML to display data in a structured format.

Tables

Tables are used to display data in a grid format with rows and columns. HTML provides several tags to create and structure tables.

Essential Tags

<table>: Defines the table.
<tr>: Defines a table row.
<th>: Defines a header cell.
<td>: Defines a standard cell.

Basic Table Structure

A simple table consists of a <table> element containing rows (<tr>) and cells (<th> for headers and <td> for data):

1<table border="1">
2  <tr>
3    <th>Header 1</th>
4    <th>Header 2</th>
5    <th>Header 3</th>
6  </tr>
7  <tr>
8    <td>Data 1</td>
9    <td>Data 2</td>
10    <td>Data 3</td>
11  </tr>
12  <tr>
13    <td>Data 4</td>
14    <td>Data 5</td>
15    <td>Data 6</td>
16  </tr>
17</table>

Adding a Caption

You can use the <caption> tag to provide a title for your table:

1<table border="1">
2  <caption>
3    Sample Data Table
4  </caption>
5  <tr>
6    <th>Header 1</th>
7    <th>Header 2</th>
8    <th>Header 3</th>
9  </tr>
10  <tr>
11    <td>Data 1</td>
12    <td>Data 2</td>
13    <td>Data 3</td>
14  </tr>
15</table>

Merging Cells

To span multiple columns or rows, use the colspan and rowspan attributes:

1<table border="1">
2  <tr>
3    <th colspan="2">Merged Header</th>
4    <th>Header 3</th>
5  </tr>
6  <tr>
7    <td rowspan="2">Merged Row</td>
8    <td>Data 2</td>
9    <td>Data 3</td>
10  </tr>
11  <tr>
12    <td>Data 5</td>
13    <td>Data 6</td>
14  </tr>
15</table>

Styling Tables with CSS

Tables can be styled using CSS to enhance readability:

1table {
2  width: 100%;
3  border-collapse: collapse;
4}
5
6th,
7td {
8  border: 1px solid #ddd;
9  padding: 8px;
10  text-align: left;
11}
12
13th {
14  background-color: #f4f4f4;
15}

Conclusion

HTML tables are essential for displaying structured data. By using table elements effectively and applying CSS for styling, you can create well-formatted tables to present information clearly.