📜  引导程序 4 中的表 - Html (1)

📅  最后修改于: 2023-12-03 15:39:31.735000             🧑  作者: Mango

引导程序 4 中的表 - Html

引导程序 4 中的表是一个用HTML语言编写的表格,它可以将数据以表格的形式呈现在网页中。

基本结构

引导程序 4 中的表由HTML的<table>标签包裹整个表格,每个行由<tr>标签包裹,每个单元格由<td>标签包裹。

下面是一个简单的引导程序 4 中的表示例。

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>18</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>20</td>
  </tr>
</table>

上述代码将会生成如下表格:

| 姓名 | 年龄 | |------|------| | 张三 | 18 | | 李四 | 20 |

表格样式

引导程序 4 的表格样式可以使用CSS来进行修改。最简单的方式是在HTML的<head>标签中添加CSS代码,例如:

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    td, th {
      border: 1px solid #ddd;
      text-align: left;
      padding: 8px;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>18</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>20</td>
  </tr>
</table>

</body>
</html>

这段代码将会生成以下样式的表格:

| 姓名 | 年龄 | |------|------| | 张三 | 18 | | 李四 | 20 |

这里的样式包括了边框、背景色、对齐方式等等,可以根据需要进行自定义。

总结

引导程序 4 中的表是一个用HTML语言编写的表格,在网页开发中经常用到。它的基本结构由<table><tr><td>标签组成,样式可以使用CSS进行修改。通过编写HTML和CSS代码,我们可以灵活地控制表格的外观和展现方式。