HTML表格的样式怎么写
在HTML中，我们可以使用<table>标签来创建一个表格，仅仅使用<table>标签是不够的，我们需要为表格添加样式，本文将介绍如何为HTML表格添加样式，包括内联样式、内部样式和外部样式表。
内联样式
1、1 行内样式
行内样式是指直接在HTML元素的开始标签内使用style属性来设置样式，这种方式的优点是直接在HTML代码中定义样式，不需要额外的CSS文件，这种方式的缺点是样式与内容混杂在一起，不利于维护和阅读。
我们可以为表格中的单元格设置字体大小和颜色：
<table>
<tr>
<td style="font-size: 14px; color: red;">单元格1</td>
<td style="font-size: 14px; color: blue;">单元格2</td>
</tr>
</table>
1、2 列内样式
列内样式是指在HTML元素的开始标签内使用style属性来设置表格的样式，这种方式的优点是可以在HTML代码中定义表格的样式，不需要额外的CSS文件，这种方式的缺点是需要为每个表格元素单独设置样式，增加了代码量。
我们可以为表格中的每一列设置背景颜色：
<table style="background-color: f0f0f0;">
<tr>
<th style="background-color: ccc;">表头1</th>
<th style="background-color: ccc;">表头2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
内部样式
2、1 在<head>标签内使用<style>标签定义CSS样式
我们可以在HTML文档的<head>标签内使用<style>标签来定义CSS样式，这种方式的优点是可以将CSS样式与HTML文档分离，方便维护和阅读，这种方式的缺点是需要将CSS代码放在HTML文档外部。
我们可以为表格添加边框和间距：
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse; /* 合并边框 */
}
th, td {
border: 1px solid black; /* 设置边框 */
padding: 8px; /* 设置内边距 */
}
</style>
</head>
<body>
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
</body>
</html>
外部样式表(CSS)
3、1 将CSS代码放在外部文件中，并在HTML文档中引用该文件
我们可以将CSS代码放在一个单独的CSS文件中，然后在HTML文档中通过<link>标签引用该文件，这种方式的优点是可以将CSS代码与HTML文档分离，方便维护和阅读，还可以利用CSS选择器来为多个HTML元素应用相同的样式，这种方式的缺点是需要将CSS代码放在外部文件中，增加了文件数量。
我们可以创建一个名为styles.css的CSS文件，并在HTML文档中引用该文件：
```css /* styles.css */
table {
border-collapse: collapse; /* 合并边框 */
th, td {
border: 1px solid black; /* 设置边框 */
padding: 8px; /* 设置内边距 */
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/267050.html
微信扫一扫