笔记大全

html表格如何做

更新时间：2023-09-14

HTML表格的基本结构

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
</table>

HTML表格最基本的结构包含了一个table标签和若干个tr（表格行）标签，每行中包含若干个td（表格列）标签，td标签中的内容即是单元格中的内容。此外，表格第一行通常用于表头，使用th标签包裹，也可以使用td标签。

设置表格边框和颜色

<table border="1" bordercolor="#ccc">
  ...
</table>

使用border属性和bordercolor属性可以分别设置表格边框的宽度和颜色。

合并单元格

<table>
  <tr>
    <td colspan="2">合并两个单元格</td>
    <td rowspan="2">合并两个单元格</td>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

使用colspan属性和rowspan属性可以分别设置要合并的单元格数，其中colspan指定列数，rowspan指定行数。在上述例子中，第一行的前两个单元格被合并为一个，第三个单元格从第一行开始合并到第二行结束。

设置表格样式

<table class="my-table">
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
</table>

<style>
.my-table {
  border-collapse: collapse;
}
.my-table th, td {
  padding: 5px;
  border: 1px solid #ccc;
}
.my-table th {
  background-color: #eee;
}
</style>

使用CSS样式可以使表格更美观，如上所示，可以使用class属性为表格设置样式，并在style标签中进行样式的定义。上述样式展示了如何将表格边框设置为柔和的灰色，设置表头背景色为浅灰色，并设置单元格的内边距为5个像素。

总结

HTML表格是Web前端开发中应用最为广泛的元素之一，几乎在每个网站的各个页面中都能看到表格的影子。表格的基本结构包含了table、tr、td和th标签，可以在标签中添加合适的属性以定制表格样式，丰富表格内容。表格也支持单元格合并，可以让表格适应更广泛的需求。对表格进行CSS样式的定义，可以让表格更加美观和易于阅读，提高网页的友好度。

c语言编程笔录