表格html代码
Sure, here's a simple example of HTML code for a table:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #dddddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Sample Table</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>UK</td>
</tr>
<tr>
<td>Alice Johnson</td>
<td>35</td>
<td>Canada</td>
</tr>
</tbody>
</table>
</body>
</html>
This code creates a basic HTML table with three columns: Name, Age, and Country, and a few rows of sample data. The table has some basic styling for borders and padding. You can customize it further based on your needs.
Certainly! Here's a continuation with some additional features and customization options for the HTML table:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customized Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #dddddd;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
text-transform: uppercase;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
/* Define specific styles for certain columns */
td:nth-child(3) {
font-style: italic;
}
/* Define a class for highlighting */
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Customized Table</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>UK</td>
</tr>
<tr>
<td>Alice Johnson</td>
<td>35</td>
<td class="highlight">Canada</td>
</tr>
<tr>
<td>Bob Brown</td>
<td>40</td>
<td>Australia</td>
</tr>
</tbody>
</table>
</body>
</html>
In this continuation, I've added a few enhancements to the table:
Added alternating row colors for better readability.Added a hover effect for rows to highlight them when hovered over.Applied specific styles to certain columns (for example, italicizing the "Country" column).Introduced a class .highlight which can be added to specific cells for emphasis (in this case, applied to the "Canada" cell).
Feel free to further customize the table based on your requirements and design preferences.
