Skip to content Skip to sidebar Skip to footer
Home / Css / Html

What The Html 5 Alternative To Using The Rules Attribute For Table Element?

Post a Comment
When using the rules attribute on this table element I get the following warning:

Solution 1:

From here

What does <table rules=""> do?

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.

So there is no HTML5 alternative, just CSS alternative:

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

tabletd {
  text-align: center;
}

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

.frame-void {
  border: none;
}

.rules-nonetd {
  border: none;
}

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

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

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

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

.rules-alltr:last-childtd {
  border-bottom: none;
}

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

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

.border-2,
.border-2td {
  border-width: 2px;
}
"&lt;TABLE BORDER=2 RULES=NONE FRAME=BOX&gt;"

<tableclass="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;"
<tableclass="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;"
<tableclass="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;"
<tableclass="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>

Solution 2:

HTML 5 demands that you replace the rules attribute with CSS attributes. Source: https://www.w3schools.com/tags/att_table_rules.asp

Post a Comment for "What The Html 5 Alternative To Using The Rules Attribute For Table Element?"

Menu Halaman Statis

© 2022 - Learn Html5