Upon applying the rules attribute to this table element
<table id="data" style="margin-top: 10px;border: 1px solid black; width:100%" rules="all">An advisory message is displayed:
The use of attribute (rules) is outdated and discouraged in HTML5 documents.
What is the modern alternative for this in HTML5?
Discover more here
What is the purpose of
<table rules="">in HTML?This attribute was previously used to define the display of borders between rows and columns, but it has now been deprecated. It is recommended to utilize CSS for styling table borders instead.
Instead of an HTML5 alternative, use the following CSS alternatives:
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>
"<TABLE BORDER=2 FRAME=VOID RULES=ALL>"
<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>
"<TABLE BORDER=2 RULES=COLS FRAME=BOX>"
<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>
"<TABLE BORDER=2 RULES=ROWS FRAME=BOX>"
<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>It is required by HTML 5 that you substitute the rules attribute with CSS attributes.
Reference: https://www.w3schools.com/tags/att_table_rules.asp
I need to implement a functionality where clicking a button will add a new paragraph after the button, and then be able to remove that paragraph by clicking on any word within it. Any guidance on how to achieve this would be highly appreciated. Thank you! ...
Just recently started using bootstrap and was curious about something. Can custom JavaScript be integrated with bootstrap buttons without any additional adjustments? ...
Adding a hero image to my Flask app page has been challenging. Here is the directory structure of my Flask project: -static |--css_files |--my.css |--images |--img.jpg -templates |--layout.html In order to incorporate a hero image, I have includ ...
Recently, I created a jQuery library for managing spacing (margin and padding). Now, I am looking to convert this library to pure JavaScript with your assistance :) Below is the JavaScript code snippet: // Useful Variables let dataAttr = "[data-m], [d ...
Is there a way to call an Android Activity from a JavaScript function? I have tried one method, but it keeps showing an error - "Method Called on NPObject". Can anyone help me solve this issue? It's really frustrating. I would highly appreciate any e ...
I am currently using bootstrap v3.3.1 from the standard directory, and I am facing difficulty in removing the border radius from the select box components specifically in Google Chrome. This particular inquiry is unique because: Despite attempting to mo ...
I'm having trouble creating a text box that spans the entire width of my container. <div class="row"> <div class="col-md-12"> <form class="form-inline" role="form"> <input type="text" class= ...
I am seeking tools to enable the calling of .php from .html files. Here is an issue: while this example successfully works in a .php file: <html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> &l ...
As I work on setting up a signup form for a MikroTik hotspot, I've encountered limitations with the device not supporting PHP. In order to pass the necessary variables from the device to an external PHP page where customer data will be saved and trial ...
I have encountered an issue where a user can successfully submit an event to a calendar, but I am facing difficulty redirecting them back to the original page. I attempted to use the following code snippet: header("Location: http://localhost/Project/Vie ...
Every time I attempt to place pins on the map, I encounter the "google is not defined" error. The map itself displays without any issues until I add the lines following the initMap() function. I have come across similar posts but none of the suggested so ...
I've been tinkering with a timer and thanks to some feedback I received in this community, everything is running smoothly. Here's what the current version looks like for reference: https://i.stack.imgur.com/Qd7ll.png Here's a snippet of my ...
In my endeavor to gather the odds data from this particular source, I am specifically focused on the "Over Under" segment and the over/under odds provided by Pinnacle and AsianOdds, which are accessible through the "compare" button. Here is an image descr ...
I have a Angular 6 application that interacts with the python API. The API responds with HTML data that I want to display on my existing page within a specific div element. I have attempted various methods but have not been successful. Test.ts public myT ...
Currently, I am facing some challenges while trying to incorporate a bootstrap 4 table into my Angular project. It appears that jquery is not functioning properly in this integration. You can view my current implementation here. The issue arises when any c ...
After researching and modifying a show/hide jQuery code I discovered, everything is functioning correctly except for the HTML img attribute not being replaced when clicked on. The jQuery code I am using: <script> $(document).ready(function() { ...
What could be causing this unusual behavior when setting line-height to match font-size: While the height of label is 16px, the height of input is 18px... Why is that? If I adjust line-height: 18px or higher, the heights suddenly align. But why does this ...
Is there a way to set the header in an XHTML page to be as wide as the page itself? I used width:100%, but the issue is that I have a dynamic table and when it grows bigger, the header doesn't expand. How can I solve this problem? #header{ top: 0 ...
I'm interested in experimenting with uploading an image using PHP and MySQL. My approach involves using a form to send data via AJAX. Here is my HTML code: <input type="file" name="logo" id="logo" class="styled"> <textarea rows="5" cols="5" ...
I'm currently working on creating a header component using FlexBox. Here is a visual representation of what I am aiming for: https://i.sstatic.net/wRFHR.png The red box represents a flexbox, while the green boxes are individual <div> elements ...