使用table元素的rules属性的HTML 5替代方法是什么？

Question

当使用规则属性此表元素

<table id="data" style="margin-top: 10px;border: 1px solid black; width:100%" rules="all">

我得到以下警告上：

属性（规则）已经过时。在HTML5文档中不鼓励使用它。

什么是HTML 5的替代品呢？

Answer 1

From here

是什么<table rules="">办？

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

所以没有HTML5替代，只是CSS选择：

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>

Answer 2

HTML，你用CSS属性替换rules属性5种需求。 来源：https://www.w3schools.com/tags/att_table_rules.asp