We have a pet table. We implement pet names as unordered list:
<table>
<caption>Pets</caption>
<thead>
<tr>
<th>owner</th>
<th>pets</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amy</td>
<td>
<ul>
<li>Piggy</li>
<li>Tracy</li>
</ul>
</td>
</tr>
</tbody>
</table>
However when navigating the table, TalkBack are unable to announce the row id and the column header "Amy, row one, owner", just announce the content "Amy".
Change the unordered list to spans, the screen readers announce normally:
<table>
<caption>Pets</caption>
<thead>
<tr>
<th>owner</th>
<th>pets</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amy</td>
<td>
<span>Piggy</span>
<span>Tracy</span>
</td>
</tr>
</tbody>
</table>
Should we prevent from unordered lists in table cells? Or is it a bug of TalkBack?
Related
I have two td's under one tr. How can i show the 2nd td in next line.Currently its displaying in same line.I would have to loop the users object and its content multiple times.
<table>
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in users" :key="index">
<td>
{{ user.id}}
</td>
<td>
<table>
<tbody>
<tr v-for="(info,index) in user.demographic" :key="index">
<td>
{{info.name}}
</td>
<td>
{{info.address}}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
I have a table structure like this
And the html structure is this
<table class="table table-bordered">
<thead>
<tr>
<th>Hierarchy</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="history-hierarchy" rowspan="4">
<div><!-- Tree structure is loaded here dynamically --></div>
</td>
</tr>
<tr>
<td class="history-text">
Equipment A700/005 is added.
</td>
</tr>
<tr>
<td class="history-text">
System instance SYSI/0002 is added.
</td>
</tr>
<tr>
<td class="history-text">
Equipment 7100/001 is replaced with 7100/002
</td>
</tr>
</tbody>
</table>
If you see the image, the Operations columns height is adjusting itself based on the Hierarchy columns height, I am looking for some way if possible to have the heights of operation column fixed say 10px and whatever space is left the last row's operation column should consume it.
So the operations column will not looke weird having so much height.
Is it possible?
the approach you are using is correct, you can use rowspan="2" on the last row as shown in my snippet.
table {height: 600px}
table td {border:1px solid red; vertical-align:top}
td.history-text {height: 20px}
<table class="table table-bordered">
<thead>
<tr>
<th>Hierarchy</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="history-hierarchy" rowspan="4">
<div>Tree structure is loaded here dynamically</div>
</td>
<td class="history-text">
Equipment A700/005 is added.
</td>
</tr>
<tr>
<td class="history-text">
System instance SYSI/0002 is added.
</td>
</tr>
<tr>
<td class="history-text" rowspan="2">
Equipment 7100/001 is replaced with 7100/002
</td>
</tr>
</tbody>
</table>
So lets say, in a HTML snippet, I have some non-table tags, then a <table> tag, then some non-table tags, then another <table> tag and so on.
What I wanna do is get the first set of non-table tags into one group, then the table section in another and the next set of non-table tags into another and so on.
I have tried using regex. It is becoming superly complicated. I have tried searching how to do using BeautifulSoup but no use.
And also, if I have to extend it to ordered <ol> and unordered <ul> sections, how can I do it?
For example: I have this (HTML) string:
<h2>Hello There.</h2>\n
<p>
Click ME </p>
<p>Lets have a coffee</p>\n
<table>
<tbody>
<tr>
<th>Drink</th><th>Cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Coffee</td><td>152.61 </td> </tr>
<tr>
<td>Coke</td><td>62.56</td> </tr>
<tr>
<td>Pepsi</td><td>21.71</td> </tr>
</tbody>
</table>
<p>
So? click me too. Here is another list</p>
<table>
<tbody>
<tr>
<th>Food</th><th>cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Bhel</td><td>25.5</td> </tr>
<tr>
<td>Puri</td><td>23.0</td> </tr>
<tr>
<td>Something</td><td>19.4</td> </tr>
<tr>
<td>Pani</td><td>17.12 </td> </tr>
<tr>
<td>Puriya</td><td>10.64 </td> </tr>
<tr>
<td>Done</td><td>9.21</td> </tr>
<tr>
<td>Rice</td><td>9.20 </td> </tr>
</tbody>
</table>
<p>This amazing collection is here.</p>
Required Result:
[<h2>Hello There.</h2>
<p>
Click ME </p>
<p>Lets have a coffee</p>,
<table>
<tbody>
<tr>
<th>Drink</th><th>Cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Coffee</td><td>152.61 </td> </tr>
<tr>
<td>Coke</td><td>62.56</td> </tr>
<tr>
<td>Pepsi</td><td>21.71</td> </tr>
</tbody>
</table>,
<p>
So? click me too. Here is another list</p>,
<table>
<tbody>
<tr>
<th>Food</th><th>cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Bhel</td><td>25.5</td> </tr>
<tr>
<td>Puri</td><td>23.0</td> </tr>
<tr>
<td>Something</td><td>19.4</td> </tr>
<tr>
<td>Pani</td><td>17.12 </td> </tr>
<tr>
<td>Puriya</td><td>10.64 </td> </tr>
<tr>
<td>Done</td><td>9.21</td> </tr>
<tr>
<td>Rice</td><td>9.20 </td> </tr>
</tbody>
</table>,
<p>This amazing collection is here.</p>]
a list containing the parts
What is the term of this table arrangement?
and I want to make a like that using bootstrap, but I fail so many times.
(also I already google it)
that is why I am here to look someone know how to do it.
I assume you are specifically referring to the use of colspan to cover multiple columns with one cell and rowspan to cover multiple rows with one cell
<table>
<tr><td rowspan="2">FOO</td><td colspan="4">EXAMPLE</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1. Something here</td><td></td><td></td><td></td><td></td></tr>
<tr><td>2. Something here</td><td></td><td></td><td></td><td></td></tr>
<tr><td>3. Something here</td><td></td><td></td><td></td><td></td></tr>
<tr><td>4. Something here</td><td></td><td></td><td></td><td></td></tr>
</table>
Try like this:
Demo
HTML:
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2">Heading</th>
<th rowspan="2">Heading</th>
<th colspan="4">Heading</th>
</tr>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>SHeading</th>
</tr>
</thead>
<tbody>
<tr>
<td>3546 </td>
<td>89789</td>
<td>3546</td>
<td>789789</td>
<td>56456757</td>
<td>56456757</td>
</tr>
<tr>
<td>3546 </td>
<td>89789</td>
<td>3546</td>
<td>789789</td>
<td>56456757</td>
<td>56456757</td>
</tr>
<tr>
<td>3546 </td>
<td>89789</td>
<td>3546</td>
<td>789789</td>
<td>56456757</td>
<td>56456757</td>
</tr>
<tr>
<td>3546 </td>
<td>89789</td>
<td>3546</td>
<td>789789</td>
<td>56456757</td>
<td>56456757</td>
</tr>
</tbody>
I have following table structure
<table>
<table>
<thead>
<tr>...header template...</tr>
</thead>
</table>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
<table>
My problem is that the datarows and header rows are not aligned to each other.
The table structure looks wierd.
Any clue how can i make them aligned.
Edit:
I have used Jqgrid to populate my grid.
The table structure which jqgrid produces is like the above one.
If i dont wrap within tag, then the first inside disappears.
Somewhere i found that jquery.clean will clean up if we dont wrap within table.
do u guys have any idea on this
You have so much syntax errors.
This is normal table:
<table border=1>
<thead>
<tr><th>header template</th></tr>
</thead>
<tbody>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</tbody>
</table>
A table have head and body and each can have rows and columns:
<table>
<thead>
<tr><td></td></tr>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
<table>
You can also see following link for more details.
Cheers !!
Try using a syntax like this:
<table>
<thead>
<tr>
<th colspan="2"> ...header template... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</tbody>
</table>