Welcome back to our HTML tutorial series! In this article, we’ll explore how to create tables in HTML. Tables are used to organize data in rows and columns, making it easier to read and understand. By the end of this article, you’ll know how to create and style tables effectively.
Basic Table Structure
A table in HTML is defined using the <table> tag. Inside the <table> tag, you use <tr> for table rows, <th> for table headers, and <td> for table data (cells).
Basic Syntax
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>Example of a Simple Table
Let’s create a simple table with three columns and two rows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Table</title>
</head>
<body>
<h1>Simple Table Example</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</table>
</body>
</html>Example:
| Name | Age | City |
|---|---|---|
| John Doe | 30 | New York |
| Jane Smith | 25 | Los Angeles |
Adding Borders and Styling
To add borders to your table, you can use the border attribute in the <table> tag. For more advanced styling, use CSS.
Adding Borders with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Styled Table Example</h1>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</table>
</body>
</html>Example:
| Name | Age | City |
|---|---|---|
| John Doe | 30 | New York |
| Jane Smith | 25 | Los Angeles |
Spanning Rows and Columns
You can merge cells across multiple rows or columns using the rowspan and colspan attributes.
Example of Colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colspan Example</title>
</head>
<body>
<h1>Colspan Example</h1>
<table border="1">
<tr>
<th colspan="3">Header spanning three columns</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
</body>
</html>Example:
| Header spanning three columns |
|---|
| Data 1 |
Example of Rowspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rowspan Example</title>
</head>
<body>
<h1>Rowspan Example</h1>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td rowspan="2">Rowspan Data</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
</tr>
</table>
</body>
</html>Example:
| Header 1 | Header 2 |
|---|---|
| Rowspan Data | Data 2 |
| Data 3 |
Adding a Table Caption
You can add a caption to your table using the <caption> tag. The caption provides a brief description of the table’s contents.
Example with Caption
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table with Caption</title>
</head>
<body>
<h1>Table with Caption Example</h1>
<table border="1">
<caption>Employee Information</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</table>
</body>
</html>Example:
| Employee Information |
|---|
| Name |
| ———— |
| John Doe |
| Jane Smith |
Conclusion
Tables are a powerful tool for organizing and displaying data on your web pages. By understanding how to create and style tables in HTML, you can present information clearly and effectively. Experiment with different table structures and styles to enhance the user experience on your website.
