HTML Table column count issue - html

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.

Related

Adding multiple elements in a table column

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>

How to make a table responsive for mobile devices and place some columns bellow the others

My name is David, I am a beginner and I have some difficulties finding a solution to my problem:
I have a page with a table, on a WordPress site. The table is too big for small devices, such as mobile phones, and I would like to go from 4 columns to 2 columns for these devices. What I would like the browser to do is to "cut" the last two columns and place them just below of the first two, because the first and the third column and the second and the forth columns contain the same information.
This would be a simplifier version of the html code:
<table>
<tbody>
<tr>
<th>Artículo</th>
<th>Descripción</th>
<th>Artículo</th>
<th>Descripción</th>
</tr>
<tr>
<td>Image 1</td>
<td>International Edition ...</td>
<td>Image 2</td>
<td>Green Box</td>
</tr>
<tr>
<td>Image 3</td>
<td>Blue Box ...</td>
<td>Image 4</td>
<td>Red Box ...</td>
</tr>
<tr>
<td>Image 5</td>
<td>Absurd Box ...</td>
<td>Image 6</td>
<td>The Bigger, Blacker Box ...</td>
</tr>
</tbody>
I have thought that it may be possible to tackle this with CSS, but all the information I have found on the internet does not match exactly this problem.
Do you know how this could be done?
Thank you very much!!!!

A table row was 3 columns wide, which is less than the column count established by the first row

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

Line up the columns of nested table to parent

So I have a table like so,
<table>
<tbody>
<tr>
<td colspan="6">My 6 headers</td>
</tr>
<tr>
<td colspan="6">My 6 inputs</td>
</tr>
<tr>
<td colspan="3">Indent 3 columns</td>
<td colspan="3">
<table>
<tbody>
<tr>
<td>repeating column 1</td>
<td>repeating column 2</td>
<td>repeating column 3</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
My issue is that, <td>repeating column 1</td> lines up with <td>My 4th input</td> column, but <td>repeating column 2</td> starts immediately after <td>repeating column 1</td> isntead of lining up with <td>My 5th input</td>. How can I align them?
jsFiddle: http://jsfiddle.net/pL89ykLp/
It isn't possible with nested tables unless you set the width to something fixed, and make pixel perfect corrections. This approach is highly unmaintainable.
Instead, don't use tables for layout, and use some proper semantic markup. What kind of semantic markup? That's hard to know without knowing the context of your application.
There's no need for the a nested table in the last tag. Change the second row to this:
<tr>
<td colspan="3">Indent 3 columns</td>
<td>column 1</td>
<td>repeating column 2 </td>
<td>repeating column 3</td>
</tr>
Fiddle:
http://jsfiddle.net/9ywaqf1L/

Image calling from external server hangs IE6

I Have Table with multiple columns and rows,
Example,
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>
//Image is loaded from external URL.
<img src="${Url}/school/${value}/image?size=tb" />
</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
Problem: This is working fine in all the browser but in IE6 browser hangs. My Table just having 10 records. (If I remove the image then working fine.)
Please some one give me some ideas on this issue.
It is a cross-browser issue. Have you tried to not close the img tag? I mean try this,
<img src="${Url}/school/${value}/image?size=tb">
BTW, it should not matter, actually.