HTML - 表格样式

你好，未来的网页开发者们！我很高兴能成为你在这个激动人心的HTML表格样式世界中的向导。作为一个教计算机科学多年的老师，我可以告诉你，掌握表格样式就像学习画画一样——它从理解你的画布和工具开始。那么，让我们跳进去，让这些表格看起来华丽吧！

HTML - Table Styling

普通HTML表格

在我们开始给表格添加样式之前，让我们回顾一下基本的HTML表格长什么样。这里有一个简单的例子：

<table>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>行1，单元格1</td>
<td>行1，单元格2</td>
</tr>
<tr>
<td>行2，单元格1</td>
<td>行2，单元格2</td>
</tr>
</table>

这段代码创建了一个有两列三行（包括表头行）的基本表格。它很实用，但说实话，它就像看油漆干一样无聊。这就是样式发挥作用的地方！

HTML表格样式

现在，让我们谈谈我们可以用来设置表格样式的不同方法。把这些想象成你在网页设计工具箱中的画笔和颜料：

属性	描述
border	设置表格和单元格的边框
border-collapse	决定单元格边框是合并成一个边框还是分开
width	设置表格的宽度
height	设置表格的高度
text-align	在单元格中对齐文本（左，右，居中）
vertical-align	在单元格中垂直对齐文本（顶部，中间，底部）
padding	设置单元格边框与其内容之间的空间
background-color	设置表格或单元格的背景颜色
color	设置文本颜色
font-family	设置文本的字体
font-size	设置文本的大小

HTML表格样式示例

让我们通过一些例子来应用这些属性。我保证，到了最后，你会像一个专业人士一样设置表格样式！

示例1：基本表格样式

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
</tr>
</table>

在这个例子中，我们添加了一些基本样式。border-collapse: collapse 属性合并了单元格边框，使外观更整洁。我们将表格宽度设置为容器的100%，为单元格添加了边框、填充，并给表头一个浅灰色背景。这就好比给你的表格理了个整洁的发型，换了一件新衬衫！

示例2：斑马纹

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>产品</th>
<th>价格</th>
</tr>
<tr>
<td>苹果</td>
<td>$1.00</td>
</tr>
<tr>
<td>香蕉</td>
<td>$0.75</td>
</tr>
<tr>
<td>橙子</td>
<td>$0.90</td>
</tr>
</table>

在这里，我们引入了斑马纹的概念。tr:nth-child(even) 选择器针对偶数行，给它们一个浅灰色背景。这种交替的颜色方案使用户更容易跟踪行跨表格。这就好比给你的表格穿上一件时尚的条纹西装！

示例3：响应式表格

<style>
.responsive-table {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
min-width: 600px;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
@media screen and (max-width: 600px) {
th, td {
display: block;
}
tr {
margin-bottom: 15px;
}
th {
text-align: center;
}
}
</style>

<div class="responsive-table">
<table>
<tr>
<th>姓名</th>
<th>职位</th>
<th>办公室</th>
<th>年龄</th>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>系统架构师</td>
<td>爱丁堡</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>会计师</td>
<td>东京</td>
<td>63</td>
</tr>
</table>
</div>

这个例子向我们的表格引入了响应性。在大屏幕上，它表现得像一个普通表格。但在小于600px宽的小屏幕上，它切换到一个卡片式的布局，每个单元格显示为一个块。这就好比教你的表格做瑜伽——它变得灵活，能够适应不同的屏幕尺寸！

结论

就这样，伙计们！我们已经把我们的表格从平淡无奇变成了时尚且响应式。记住，设置表格样式都是为了提高可读性和用户体验。这不仅是为了让东西看起来漂亮（虽然那也很有趣）！

在你继续你的网页开发之旅时，继续尝试不同的样式。也许可以尝试给行添加悬停效果，或者玩转不同的颜色方案。可能性是无穷无尽的！

就像一顿美餐没有正确的呈现就不完整一样，一个结构良好的HTML文档没有正确样式的表格也不完整。所以，去设置那些表格吧！记住，在网页开发的世界里，熟能生巧。快乐编码！

Credits: Image by storyset