制作网页表格

admin 18 0

HTML代码:

制作网页表格-第1张图片-美图吧
(图片来源网络,侵删)
<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
    </tr>
    <!-- 可以添加更多的行数据 -->
  </tbody>
</table>

CSS代码(可选,用于美化表格):

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

这个表格包含一个表头(thead)和表主体(tbody),表头包含三列,分别用th元素表示,表主体包含两行数据,每行包含三个单元格,用td元素表示,您可以根据需要添加更多的行和列。

制作网页表格-第2张图片-美图吧
(图片来源网络,侵删)

如果您想让表格看起来更美观,可以使用CSS来添加样式,在上面的CSS代码中,我们设置了表格的宽度、边框样式、单元格的内边距和文本对齐方式等,您还可以根据需要自定义其他样式。

请注意,这只是一个基本的示例,您可以根据您的需求进行修改和扩展。

制作网页表格-第3张图片-美图吧
(图片来源网络,侵删)

抱歉,评论功能暂时关闭!