I'm working on optimizing a website for visually impaired. I have a table on the page in the following format -
<table>
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
Currently the screen reader is announcing "row 1 col 1 number" but the expectation is that it should announce "row 1 col 1 number column header" when its a element. How can I configure it? Setting role="columnheader" is not working.
It is scope you are looking for to associate columns and rows.
scope="col" will associate a table header as a column header.
You can also associate a row header if you wish with scope="row"
<table>
<caption>My table caption - don't forget this so people know what a table is for / about</caption>
<thead>
<tr>
<th scope="col">Number</th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Mike</td>
<td>Simmons</td>
</tr>
</tbody>
</table>
See https://www.w3.org/TR/WCAG20-TECHS/H63.html for more info on this technique.
p.s. don't forget to add a <caption> to your table!
Related
I have a web app, front end has a bootstrap table, whose data rendered from Django rest framework.
As the data is rendered using data-field, it only has table header, does not have table column.
I want to make some some column editable but some not, but but failed to do so. The contenteditable='true'/'false' flag does not function on a column level.
How could I make some column editable but some not？
<table contenteditable='true' class="table table-bordered table-sm" width="100%" cellspacing="0" style="font-size: 1.0rem;"
id="bk-table"
data-toggle="table"
data-toolbar="#toolbar"
data-cookie="true"
data-cookie-id-table="materialId"
data-show-columns="true"
data-show-refresh="true"
data-show-fullscreen="true"
data-height="650"
data-click-to-select="true"
data-id-field="id"
data-show-footer="true"
data-url="/api/materials/"
data-query-params="queryParams"
data-remember-order="true"
data-pagination="true"
data-side-pagination="client"
data-total-field="count"
data-data-field="results">
<thead class="thead-dark" >
<tr contenteditable='true'>
<th data-field="state" data-checkbox="true"></th>
<th data-field="type">Course Type</th>
</tr>
</thead>
</table>
use bootstrap table plugin "x-editable" to make a column editable or non-editable use
data-editable="true" data-editable="false" respectively on <tr>
for example
<table id="my_table_id"
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-4" data-editable="true">Name</th>
<th class="col-md-7" data-editable="false">Description</th>
</tr>
</thead>
</table>
These are my first steps in FE so please don't hate me. I want to create a page with user details.
What I have is something below:
First name: Last name: User status: Date joined: Policies accepted:
John Doe active 12.12.2021 true
To do so I used table but below that table I need to display user contact details:
Contact details
Email: Phone number:
example#example.com +681234123412
Is there a better way to display such a thing than table or it is a common approach in such situations ?
You should use forms instead of table for the user details and the contact details, it's much more effective, productive, and easier.
<table border="1">
<thead>
<tr>
<th>First Name:</th>
<th>Last Name:</th>
<th>User Status:</th>
<th>Date Joined:</th>
<th>Policies Accepted:</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>Active</td>
<td>12.12.2021</td>
<td>True</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">Contact Details</td>
</tr>
<tr>
<td colspan="3">Email:</td>
<td colspan="2">Phone Number:</td>
</tr>
<tr>
<td colspan="3">example#example.com</td>
<td colspan="2">+681234123412</td>
</tr>
</tfoot>
Here's the screen shot example.
https://i.stack.imgur.com/zJSqN.jpg
I want to create a table that its data is a Map< String, List < Object> >.
So the table has one header that and the rows should have the exact data.
Map.key
Object.item1
Object.item2
Object.item3
So since it is a List of Object i want one row for every Object of the List and the Map.key to be repeated.
So i need to iterate through keys like
<table>
<thead>
<tr>
<th>Code</th>
<th>Status</th>
<th>Flag</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<tr th:each= "result : ${myMap}">
<td th:text="${result.key}"></td>
<td><table>
<tr th:each="obj: ${result.value}">
<td th:text="${not #lists.isEmpty(obj.errorList)}?'Error':'Warning'"></td>
<td th:text="${obj.flag}==true?'YES':'NO'"></td>
<td th:text="${not #lists.isEmpty(obj.errorList)}?${obj.warningList}:${obj.errorList}"></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
but this solution places a table in a table. I want to use one header and iterate the lists and place the variables in the main table .
I think you're looking for a structure like this:
<table>
<thead>
<tr>
<th>Code</th>
<th>Status</th>
<th>Flag</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<th:block th:each= "result : ${myMap}">
<tr th:each="obj: ${result.value}">
<td th:text="${result.key}" />
<td th:text="${not #lists.isEmpty(obj.errorList)}?'Error':'Warning'" />
<td th:text="${obj.flag}==true?'YES':'NO'" />
<td th:text="${not #lists.isEmpty(obj.errorList)}?${obj.warningList}:${obj.errorList}" />
</tr>
</th:block>
</tbody>
</table>
I have a pre-built ecomm module for a website that is storing HTML in an XML field in SQL.
That being said when I select data from that field it's all jargon instead of my HTML.
How can I recode the XML into HTML in a select statement?
Data Stored in xml field [Overview]:
<locale en-US="<h3>As Shown Details</h3> <p>6514/1 SN AWH TABLE LAMP AS SHOWN</p> <h3>Item Details</h3> <div class="table-responsive"> <table class="table table-striped table-condensed" width="100%" border="0"> <tbody> <tr> <th scope="row">Manufacturer</th> <td>Holtkotter International</td> </tr> <tr> <th scope="row">Dimensions</th> <td>Width 7.25 x Depth 7.25 x Height 18.5</td> </tr> <tr> <th scope="row">Seat Height</th> <td></td> </tr> <tr> <th scope="row">Arm Height</th> <td></td> </tr> <tr> <th scope="row">Inside Depth</th> <td></td> </tr> <tr> <th scope="row">Fabric Content</th> <td></td> </tr> <tr> <th scope="row">Country of Origin</th> <td></td> </tr> </tbody> </table> </div> <div class="part1">This modern table lamp adds style and versatility to virtually any decor. Equipped with a full-range, turn-knob dimmer and a 100 Watt Halogen bulb by Osram. Pair it with the matching wall sconce 9426, floor lamp 6515, or swing-arm floor lamp 9434.</div><br><br><div class="part2">Available in Hand Brushed Old Bronze (shown), Antique Brass, Brushed Brass, Chrome, and Satin Nickel Finishes.</div><br><br><div class="part3">Halogen Line Voltage 100W bulb included.</div>" />
Should be clean HTML I've tried using
select convert(xml, [Overview]) as code
from [mytable]
for xml path (''), type
but it returns
<code><locale en-US="<h3>As Shown Details</h3> <p>6514/1 SN AWH TABLE LAMP AS SHOWN</p> <h3>Item Details</h3> <div class="table-responsive"> <table class="table table-striped table-condensed" width="100%" border="0"> <tbody> <tr> <th scope="row">Manufacturer</th> <td>Holtkotter International</td> </tr> <tr> <th scope="row">Dimensions</th> <td>Width 7.25 x Depth 7.25 x Height 18.5</td> </tr> <tr> <th scope="row">Seat Height</th> <td></td> </tr> <tr> <th scope="row">Arm Height</th> <td></td> </tr> <tr> <th scope="row">Inside Depth</th> <td></td> </tr> <tr> <th scope="row">Fabric Content</th> <td></td> </tr> <tr> <th scope="row">Country of Origin</th> <td></td> </tr> </tbody> </table> </div> <div class="part1">This modern table lamp adds style and versatility to virtually any decor. Equipped with a full-range, turn-knob dimmer and a 100 Watt Halogen bulb by Osram. Pair it with the matching wall sconce 9426, floor lamp 6515, or swing-arm floor lamp 9434.</div><br><br><div class="part2">Available in Hand Brushed Old Bronze (shown), Antique Brass, Brushed Brass, Chrome, and Satin Nickel Finishes.</div><br><br><div class="part3">Halogen Line Voltage 100W bulb included.</div>" /></code>
There's no need to do any manual re-codings. Reading the attribute value directly from the XML will do all the re-encoding for you implicitly:
DECLARE #mockup TABLE(Overview XML);
INSERT INTO #mockup(Overview)
VALUES(N'<locale en-US="<h3>As Shown Details</h3> <p>6514/1 SN AWH TABLE LAMP AS SHOWN</p> <h3>Item Details</h3> <div class="table-responsive"> <table class="table table-striped table-condensed" width="100%" border="0"> <tbody> <tr> <th scope="row">Manufacturer</th> <td>Holtkotter International</td> </tr> <tr> <th scope="row">Dimensions</th> <td>Width 7.25 x Depth 7.25 x Height 18.5</td> </tr> <tr> <th scope="row">Seat Height</th> <td></td> </tr> <tr> <th scope="row">Arm Height</th> <td></td> </tr> <tr> <th scope="row">Inside Depth</th> <td></td> </tr> <tr> <th scope="row">Fabric Content</th> <td></td> </tr> <tr> <th scope="row">Country of Origin</th> <td></td> </tr> </tbody> </table> </div> <div class="part1">This modern table lamp adds style and versatility to virtually any decor. Equipped with a full-range, turn-knob dimmer and a 100 Watt Halogen bulb by Osram. Pair it with the matching wall sconce 9426, floor lamp 6515, or swing-arm floor lamp 9434.</div><br><br><div class="part2">Available in Hand Brushed Old Bronze (shown), Antique Brass, Brushed Brass, Chrome, and Satin Nickel Finishes.</div><br><br><div class="part3">Halogen Line Voltage 100W bulb included.</div>" />')
SELECT m.Overview.value(N'(/locale/#en-US)[1]','nvarchar(max)')
FROM #mockup AS m
The result can not be casted to XML due to the less strict rules of HTML (namely the unclosed <br> elements). But it works perfectly. Embedded in a website the browser showed me this
(important Your CSS classes are missing of course...):
I've got an HTML table of which I cannot depend on how many rows and/or columns it will contain - so using index numbers is not possible. Here is an example of the table:
|Name|Description|Credit|Balance|
|Bob | Rent |400.00|1000.00|
|Jim | Car |100.00|4000.00|
Here is the HTML:
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Credit</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>Rent</td>
<td>400.00</td>
<td>1000.00</td>
</tr>
<tr>
<td>Jim</td>
<td>Car</td>
<td>100.00</td>
<td>4000.00</td>
</tr>
</tbody>
</table>
I need to get the credit amount for which ever name I need.
Got it:
//tr[td[.="Jim"]]/td[count(ancestor::table/thead/tr/th[.="Credit"]/preceding-sibling::*)+1]