使用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