Creating a table in HTML is straightforward. Here's a basic example to get you started:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<h2>Basic HTML Table Example</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<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>
<tr>
<td>Mike Johnson</td>
<td>35</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</body>
</html>
```
### Explanation:
1. **HTML Structure**:
- `<table>`: Defines the table.
- `<thead>`: Contains the header row(s) of the table.
- `<tbody>`: Contains the body rows of the table.
2. **Table Header (`<thead>`)**:
- `<tr>`: Defines a row in the table header.
- `<th>`: Defines a header cell in the table header.
3. **Table Body (`<tbody>`)**:
- `<tr>`: Defines a row in the table body.
- `<td>`: Defines a cell in the table row.
4. **Styling**:
- CSS (`<style>` section): Adds basic styling to the table (`border-collapse`, cell padding, etc.).
### Additional Tips:
- Use `<th>` for header cells and `<td>` for data cells.
- You can style the table further using CSS to adjust borders, spacing, and alignment.
- Ensure your table structure (`<thead>`, `<tbody>`, `<tfoot>`) is well-formed for accessibility and readability.
This example provides a basic structure for creating a table in HTML. You can expand and customize it further based on your specific requirements and design preferences.
No comments:
Post a Comment