使用表格元素的规则属性的 HTML 5 替代方法是什么? [英] What the HTML 5 alternative to using the rules attribute for table element?

问题描述

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

When using the rules attribute on this table element

我收到以下警告:

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

Attribute (rules) is obsolete. Its use is discouraged in HTML5 documents.

HTML 5 的替代方案是什么?

What is the HTML 5 alternative for this?

推荐答案

从这里

有什么作用?

What does <table rules=""> do?

用于指定行和列之间的内部边框的显示.此属性已被弃用.改用 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;
}

"<TABLE BORDER=2 RULES=NONE FRAME=BOX>"

<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 替代方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

登录 关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.