使用表格元素的规则属性的 HTML 5 替代方法是什么?

本文介绍了使用表格元素的规则属性的 HTML 5 替代方法是什么?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在这个表格元素上使用 rules 属性时

When using the rules attribute on this table element

我收到以下警告:

属性(规则)已过时.不鼓励在 HTML5 文档中使用它.

HTML 5 的替代方案是什么?

What is the HTML 5 alternative for this?

推荐答案

从这里

有什么作用?

用于指定行和列之间的内部边框的显示.此属性已被弃用.改用 CSS 来设置表格边框的样式.

Was used to specify the display of internal borders between rows and colums. This attribute has been deprecated. Use CSS to style table borders instead.

所以没有 HTML5 替代品，只有 CSS 替代品:

So there is no HTML5 alternative, just CSS alternative:

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 15px;
}

table td {
  text-align: center;
}

.frame-box {
  border: 1px solid black;
}

.frame-void {
  border: none;
}

.rules-none td {
  border: none;
}

.rules-all td {
  border: 1px solid black;
}

.rules-all td:first-child {
  border-left: none;
}

.rules-all td:last-child {
  border-right: none;
}

.rules-all tr:first-child td {
  border-top: none;
}

.rules-all tr:last-child td {
  border-bottom: none;
}

.rules-cols td {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.rules-rows td {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.border-2,
.border-2 td {
  border-width: 2px;
}

"&lt;TABLE BORDER=2 RULES=NONE FRAME=BOX&gt;"

<table class="rules-none border-2 frame-box">
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>4</td><td>5</td><td>6</td></tr>
  <tr><td>7</td><td>8</td><td>9</td></tr>
</table>

"&lt;TABLE BORDER=2 FRAME=VOID RULES=ALL&gt;"
<table class="border-2 frame-void rules-all">
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>4</td><td>5</td><td>6</td></tr>
  <tr><td>7</td><td>8</td><td>9</td></tr>
</table>

"&lt;TABLE BORDER=2 RULES=COLS FRAME=BOX&gt;"
<table class="border-2 frame-box rules-cols">
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>4</td><td>5</td><td>6</td></tr>
  <tr><td>7</td><td>8</td><td>9</td></tr>
</table>

"&lt;TABLE BORDER=2 RULES=ROWS FRAME=BOX&gt;"
<table class="border-2 frame-box rules-rows">
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>4</td><td>5</td><td>6</td></tr>
  <tr><td>7</td><td>8</td><td>9</td></tr>
</table>

这篇关于使用表格元素的规则属性的 HTML 5 替代方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-27 07:21