I am trying to display table title with <section> tag in every page like <thead> tag as per below HTML script, But it's not displaying section tag
on every page. Is there any solution for this?
<table class="zebra">
<caption>Table caption goes here</caption>
<thead>
<tr>
<th>Title1</th>
<th>Title2</th>
<th>Title3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1</td>
<td>Row2</td>
<td>167.00</td>
</tr>
<tr>
<td>Row2</td>
<td>Row2</td>
<td>444.53</td>
</tr>
<tr>
...... untill second page
</tr>
</tbody>
</table>
Related
In below html code when i focus on any button. All 3 button are read instead of just focused one.
<table>
<tr>
<th >Column 1</th>
<th >Column2</th>
<th >
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
</th>
</tr>
<tr>
<td>Row1</td>
<td>Row2</td>
<td>Row3
<div>
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
</div>
</td>
</tr>
</table>
Is this JAWS issue. or am i missing something in my code.
I'm a starter and I was trying some elements, as practice.
There's sth that i can't figure it out.I also have searched google but no answers found.
I wrote 2 tables, in the first one I used tbody to style the body of the table. But when I load the page, I see the style used in css for the tbody in the first table, has also effected the second table(without tbody tag) completely.Why is this happening?
Here is the code :
<table id="t1">
<caption>UFO Seen by People</caption>
<thead>
<tr>
<th>Name</th>
<th>City Name</th>
<th>Seen</th>
<th>Times seen</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Jack</td>
<td>North Russia</td>
<td>2020-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Korea</td>
<td>2000-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Pole</td>
<td>1995-06-12</td>
<td>twice</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Blah Blah Blah</td>
</tr>
</tfoot>
</table>
<table id="t2">
<caption>UFO Seen by People2</caption>
<colgroup>
<col span="2" style="text-align:right; background-color:yellow;">
<col style="background-color:cyan; background-image:url('baelen.jpg');">
</colgroup>
<tr>
<th>Name</th>
<th>City Name</th>
<th>Seen</th>
<th>Times seen</th>
</tr>
<tr>
<td rowspan="3">Dan</td>
<td>North Russia</td>
<td>2020-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Korea</td>
<td>2000-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Pole</td>
<td>1995-06-12</td>
<td>twice</td>
</tr>
</table>
And here is the css used :
#t1 { border:2px solid black; border-spacing:10pt; background-color:pink; width:100%;}
#t2 { border:2px solid rgb(20,20,20); border-collapse:collapse; width:100%;}
tbody { background-color:white; text-align:center; vertical-align:middle; font-size:20pt;}
That's really simple, that affect the second table cause you use tbody in css and not #t1 tbody, use correct selector if you want to affect only one element.
In addition I advise you not to use style on HTML and in CSS except in the case of manipulation in JavaScript. This will also allow you to better understand what does what, if you want to give a particular style to elements of your table assign their classes to your CSS.
I want create a one <table> where multiple custom elements can have multiple <tr> components.
I tried using containerless, but element get rendered outside of <table>.
<table>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<order-line repeat.for="line of lines" line.to-view="line" containerless></order-line>
</tbody>
</table>
And custom element looks like
<template>
<tr>
<td>${line.position}</td>
<td>${line.name}</td>
</tr>
<tr if.to-view="detailsVisible">
<td colspan="2">${line.complicatedDescription}</td>
</tr>
</template>
How I can get a table row with details as another <tr> element within one aurelia CustomElement?
This is a limitation of the html spec. A <table> element cannot contain elements other than <tbody>, <tr>, etc.
You can use as-element to overcome this limitation:
<tr as-element="order-line" repeat.for="line of lines" line.to-view="line" containerless></tr>
This tells the template compiler that this <tr> is in fact an order-line custom element and to process it as such. At the same time, it "fools" the browser into thinking that this is just an ordinary <tr>
<table> can contain multiple <tbody> elements, this will allow to wrap multiple <tr> elements inside custom element with <tbody>.
/* custom element */
<template>
<tbody>
<tr>
<td>${line.position}</td>
<td>${line.name}</td>
</tr>
<tr if.to-view="detailsVisible">
<td colspan="2">${line.complicatedDescription}</td>
</tr>
</tbody>
</template>
Use as custom element inside
<table>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
</tr>
</thead>
<order-line repeat.for="line of lines" line.to-view="line"></order-line>
</table>
I have this simple html table
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
<tbody>
<tr>
<td>MyName</td>
<td onclick="delete()">X</td>
<td onclick="update()">U</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$('#mytable').DataTable();
});
</script>
If i open this on the browser i get
"Cannot read property 'mData' of undefined".
I don't undestand where is the problem.. I am following the official example: https://datatables.net/examples/basic_init/complex_header.html
Thank you all!
your html have unmatched number of columns, notice the first row of your header has colspan while the second row doesn't.
what you can do is to provide a rowspan.
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
here's a link to the datatables example of complex headers. https://datatables.net/examples/basic_init/complex_header.html
I am a fairly new web developer, just needed quick help with some view code.
I was looping through an object in my controller called "products". I was displaying all the data of each item fine before I wanted to organize it in a table.
Could anyone see the problem with my code? I'm a very weak front end designer, back end is my niche, so it could be a very simple error.
<tr ng-repeat="product in Ctrl.products">
<td><img ng-src= "{{product.image}}"></td>
<td>
<tr>
<td>Name:</td><td>{{product.name}}</td>
</tr>
<tr>
<td>Price:</td><td>{{product.price}}</td>
</tr>
<tr>
{{product.description}}
</tr>
</td>
</tr>
You can't insert a TR inside a TD. You need to insert a full table inside the TD to achieve what you want.
<table>
<tr>
<td>
<table><tr><td>...</td></tr></table>
</td>
</tr>
</table>
You can use rowspan properties:
<table>
<tbody ng-repeat="product in Ctrl.products">
<tr>
<td rowspan="2"><img ng-src= "{{product.image}}"></td>
<td>Name:</td><td>{{product.name}}</td>
<td rowspan="2">{{product.description}}</td>
</tr>
<tr>
<td>Price:</td><td>{{product.price}}</td>
</tr>
</tbody>
</table>