HTML教程 #8：设置HTML表格的标题、边框和样式

2023-06-30

摘要: 要设置 HTML 表格的标题、边框和样式，可以使用以下方法：1. 设置表格标题：使用`caption`标签可以添加表格标题，该标签应位于`table`标签之后，但在第一个`tr`标签之前。示例： table caption学生信息/caption tr ...

要设置 HTML 表格的标题、边框和样式，可以使用以下方法：

1. 设置表格标题：

使用`<caption>`标签可以添加表格标题，该标签应位于`<table>`标签之后，但在第一个`<tr>`标签之前。

示例：

   <table>
     <caption>学生信息</caption>
     <tr>
       <th>姓名</th>
       <th>年龄</th>
       <th>成绩</th>
     </tr>
     <!-- 表格数据行 -->
   </table>

2. 设置表格边框：

可以使用 CSS 来设置表格的边框样式。通过设置`border`属性来定义边框的宽度、样式和颜色。

示例：

   table {
     border-collapse: collapse;
     border: 1px solid black;
   }
   th, td {
     border: 1px solid black;
   }

3. 设置表格样式：

可以使用 CSS 来设置表格的样式，如背景色、文本对齐等。

示例：

   table {
     background-color: #f2f2f2;
     text-align: center;
   }
   th {
     background-color: #cccccc;
     font-weight: bold;
   }
   td {
     padding: 5px;
   }

在上述示例中，首先使用`<caption>`标签添加了一个表格标题。然后，使用 CSS 设置了表格和单元格的边框样式，通过`border-collapse: collapse;`来合并边框，并使用`border`属性设置边框的宽度和颜色。接着，使用 CSS 设置了表格的背景色、文本对齐方式，以及表头单元格的背景色和加粗。最后，使用 CSS 设置了表格数据单元格的内边距。

这些示例演示了如何设置 HTML 表格的标题、边框和样式，你可以根据需要进行自定义，调整样式属性来满足具体的设计要求。

查看全文

上一篇：HTML教程 #7：掌握表格标签（ table、tr、td）的使用方法下一篇：HTML教程 #9：学习如何创建表单以收集用户输入

HTML教程 #8：设置HTML表格的标题、边框和样式

1. 设置表格标题：

2. 设置表格边框：

3. 设置表格样式：

相关阅读

热门文章