Table rules 属性

在 HTML 表格中，我们可以使用 rules 属性来定义表格的边框规则。rules 属性有以下几种取值：

• none：默认值，表示没有边框规则。
• groups：表示表格的外边框只在行组和列组之间绘制。
• rows：表示表格的外边框只在行之间绘制。
• cols：表示表格的外边框只在列之间绘制。
• all：表示表格的外边框在行和列之间都绘制。

使用示例

1. rules="none"

// www.javascriptcn.com code example
<table border="1" 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>

在这个示例中，表格的边框规则被设置为 none，即没有边框。

2. rules="groups"

// www.javascriptcn.com code example
<table border="1" 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>

在这个示例中，表格的边框规则被设置为 groups，即外边框只在行组和列组之间绘制。

3. rules="rows"

// www.javascriptcn.com code example
<table border="1" 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>

在这个示例中，表格的边框规则被设置为 rows，即外边框只在行之间绘制。

4. rules="cols"

// www.javascriptcn.com code example
<table border="1" 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>

在这个示例中，表格的边框规则被设置为 cols，即外边框只在列之间绘制。

5. rules="all"

// www.javascriptcn.com code example
<table border="1" rules="all">
  <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>

在这个示例中，表格的边框规则被设置为 all，即外边框在行和列之间都绘制。

通过使用 rules 属性，我们可以灵活地控制表格的边框规则，使表格在页面中展示出不同的风格。