HTML <table> rules 属性

在 HTML 中，<table> 元素用于创建表格，而rules属性用于指定表格的边框规则。rules属性有四个可能的取值：none、groups、rows和cols。

rules属性取值

1. none

当rules属性的取值为none时，表格不显示任何边框规则。这意味着表格中的单元格之间没有任何可见的分隔线。

示例代码：

// www.javascriptcn.com code example
<table rules="none">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

2. groups

当rules属性的取值为groups时，表格的边框规则将应用于整个表格，而不是单独的行或列。这意味着整个表格将被包裹在一个边框中。

示例代码：

// www.javascriptcn.com code example
<table rules="groups">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

3. rows

当rules属性的取值为rows时，表格的边框规则将只应用于行之间。这意味着只有行之间会有边框分隔。

示例代码：

// www.javascriptcn.com code example
<table rules="rows">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

4. cols

当rules属性的取值为cols时，表格的边框规则将只应用于列之间。这意味着只有列之间会有边框分隔。

示例代码：

// www.javascriptcn.com code example
<table rules="cols">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

通过rules属性，我们可以灵活地控制表格的边框规则，以满足不同的设计需求。