HTML tables are used to display data in a tabular format. They are a great way to organize and present information in a structured manner. Tables are made up of rows and columns, with each cell containing data or other elements such as images or links.
Tables are created using the <table> tag, with each row represented by the <tr> tag and each cell represented by the <td> tag. The <th> tag is used to define table headers.
Here is an example of a simple HTML table:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Female</td>
</tr>
</table>
This table has three columns: Name, Age, and Gender. The first row contains the table headers, while the second and third rows contain the data.
You can also add borders, padding, and spacing to your table using CSS. Here is an example:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Female</td>
</tr>
</table>
This table has a collapsed border, with padding and spacing added to the cells. The table headers have a green background color and white text.
Tables can also be used to create more complex layouts, such as forms or calendars. Here is an example of a form created using a table:
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit"></td>
</tr>
</table>
This form has three input fields and a submit button, all contained within a table. The colspan attribute is used to span the two columns of the final row.
HTML tables are a powerful tool for organizing and presenting data in a structured manner. With a little CSS, you can create beautiful and functional tables for your website.