I am trying to add multiple table cells elements under each of my heading cells but it isn't working.
Here is a screen for better understanding :
I would like to have for each of my category, say for example,
Category 1 : to have below "Brandon" others names like => Steph, Emily, John, etc.
So far I made with a line break but it doesn't work as expected: each item should be in a separated row.
<table>
<tr>
<th>Category 1</th>
<th>Category 2</th>
</tr>
<tr>
<td>Emil<br>Brandon</td>
<td>Tobias</td>
</tr>
</table>
Simply add another row.
<table>
<tr>
<th>Category 1</th>
<th>Category 2</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
</tr>
<tr>
<td>Brandon</td>
<td></td>
</tr>
</table>
Related
I have an HTML file that I convert to PDF using the Wkhtmltopdf tool.
I am using page-break-inside: avoid style to escape table wrapping in pages (if there is no place on the current page for the table the whole table goes to a new pdf page), and it works great for tables.
The question is
I have this kind of table
<table >
<caption>Payments</caption>
<tbody>
<tr>
<th>line 1</th>
<td>100.00</td>
</tr>
<tr>
<th>line1 note 1</th>
<td>120.00</td>
</tr>
<tr>
<th>line1 note 2</th>
<td>20.00</td>
</tr>
</tbody>
<tbody>
<tr>
<th>line 2</th>
<td>100.00</td>
</tr>
<tr>
<th>line2 note 1</th>
<td>120.00</td>
</tr>
<tr>
<th>line2 note 2</th>
<td>20.00</td>
</tr>
</tbody>
</table>
where each block is tbody inside one big table, as the block can be too long and it can be bigger than one pdf page I want to wrap it by tbody, not by the table. I want the new tbody block to start from the new page (instead of cutting inside tbody block) if there is no place on the current page.
For school I have to make a table. It has to look like this:
example
A fragment of The code i use:
<thead>
<tr>
<th colspan="2">Nummers</th>
<th>Duur</th>
<th>Beluisteren</th>
</tr>
<tr>
<th colspan="2">Album: Nevermind</th>
<th>Jaar: 1991</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Smells Like Teen Spirit</td>
<td>4.37</td>
</tr>
<tr>
<td>2</td>
<td>In Bloom</td>
<td>4.14</td>
</tr>
<tr>
<td>3</td>
<td>Come As You Are</td>
<td>3.39</td>
</tr>
<tr>
<td>4</td>
<td>Breed</td>
<td>3.03</td>
</tr>
II get the warning from W3C: A table row was 3 columns wide, which is less than the column count established by the first row
I understand what they think I do wrong (I use 3 columns, while I have 4), but that's what I am supposed to do for the school practice.
Is there something i can change in the code so that I can do what I want without a warning from W3C?
Thanks for helping! Greetings Kim
I'm doing an HTML table for a school work, but I don't get it through the W3C Validator. At first I got some "Stray end tag tr" errors, but after fixing it, it keeps showing me the warning :
A table row was 1 columns wide, which is less than the column count established by the first row (3).
I actually understand what it means, but I can't seem to find how to fix it. I tried some stuff but it always messed up the table.
After fixing the "Stray end tag tr" errors, I got this code:
<table border="1">
<tr>
<th colspan="3">Title 1</th>
</tr>
<tr>
<th rowspan="4">Title 2</th>
</tr>
<tr>
<td>Something 1</td>
<td>Something 2</td>
</tr>
<tr>
<td>Something 3</td>
<td>Something 4</td>
</tr>
<tr>
<td>Something 5</td>
<td>Something 6</td>
</tr>
<tr>
<th rowspan="3">Title 3</th>
</tr>
<tr>
<td>Something 7</td>
<td>Something 8</td>
</tr>
<tr>
<td>Something 9</td>
<td>Something 10</td>
</tr>
</table>
The final table looks like this:
Do you have any idea ?
I think that the rowspan cells cause that row to count as a single cell. I think you would need to combine them with the following row using something like:
<table border="1">
<tr>
<th colspan="3">Title 1</th>
</tr>
<tr>
<th rowspan="3">Title 2</th>
<td>Something 1</td><td>Something 2</td>
</tr>
<tr><td>Something 3</td><td>Something 4</td></tr>
<tr><td>Something 5</td><td>Something 6</td></tr>
<tr>
<th rowspan="2">Title 3</th>
<td>Something 7</td><td>Something 8</td>
</tr>
<tr><td>Something 9</td><td>Something 10</td></tr>
</table>
If it helps, what indicated the problem to me was that the rowspan values were 1 higher than they should be - you didn't actually want the cell to span 4 rows, you wanted it to span 3 but the row it was on counts as one of them.
I need add to some elements on top of a table in line with the columns of the said table.
This table contains a <thead> (which is required due to jquery.tablesorter plugin). I assumed that if I put another <tbody> on top of the <thead> I would be able to keep these elements in line with the rest of the columns, but both chrome and firefox render every <tbody> below the <thead>.
Example:
<table>
<tbody>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
</tbody>
<thead>
<tr>
<th>head</th><th>head</th><th>head</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td><td>2</td><td>2</td>
</tr>
<tr>
<td>3</td><td>3</td><td>3</td>
</tr>
<tr>
<td>4</td><td>4</td><td>4</td>
</tr>
</tbody>
</table>
Although I understand this, I still need to find a way to have these elements stay in line with specific columns.
You can use multiple rows in <thead> like this:-
<table>
<thead>
<tr> <td>1</td> <td>1</td> </tr>
<tr> <td>head</td> <td>head</td> </tr>
</thead>
</table>
I recommend that you use an id (#) marker to identify that part that you want the js to work off and have the js use that id.
With that, have the thead first and the tbody last.
The variations you are describing may work - in the browser you using now, on the OS you are ok - and may be compliant a certain version of the HTML spec- but putting things in an unusual order is (in my expereince) just the kind of thing to not work, or work the same, everywhere and to eventually be the cause of much frustration, especially as the site grows in complexity.
One solution is to use another table inside one tr, in your thead. Althought, this is a totally ugly solution.
You can also place a div above your table using CSS.
Correct table structure is:
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
<thead> will always be on the top and <tfoot> will always be at the bottom.
Using jQuery you can swap <thead> and <tbody> content by:
$(document).ready(function() {
$('#myTrigger').click(function() {
var top = $('thead').html();
var mid = $('tbody').html();
$('thead').html(mid);
$('tbody').html(top);
});
});
I always see the th tag only used in the first row of the table. Is there some specific reason why it can't be used to create 'left' headers along the leftmost column. Is this bad form, or is this ok.
Basically, a table with headings on the top row and the leftmost column, with the very top left square being empty.
e.g.
<table>
<tr>
<th><!--empty--></th>
<th>Top 1</th>
<th>Top 2</th></tr>
<tr>
<th>LeftHeader?</th>
<td>data1</td>
<td>data2</td></tr>
</table>
That's valid, however, when using a <thead> it has to be the first row. This is valid:
<table>
<thead>
<tr>
<td>0,0</td><td>1,0</td><td>2,0</td>
</tr>
</thead>
<tr>
<th>0,1</th><th>1,1</th><th>2,1</th>
</tr>
</table>
But this is not:
<table>
<tr>
<td>0,0</td><td>1,0</td><td>2,0</td>
</tr>
<thead>
<tr>
<th>0,1</th><th>1,1</th><th>2,1</th>
</tr>
</thead>
</table>
It's invalid HTML and you can double check that with the w3C markup validation service though before you do you'll have to add a <!DOCTYPE> declaration and the rest of a valid HTML doc.