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;
}

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>

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 - Html5 School