How to create table with different number of cells in the rows? - html

My idea in general: I have HTML Table with custom rows inside. This is similar example:
2nd cell in 1st row - Shold be about 40% of row and 6th cell of 1st row should be a double
8th cell of 2nd row should be big ~ 40%
Basically this 2 rows repeats in my table. Each 2nd row collapsible and it collapse on click in first cell of 1st row. The problem is when I collapse and back my table changes the size of columns and my screen jumps all the time. I want this rows to be always the same structure, but since I have response design I don't want to set exact width for each cell.
I've tried a dozen of variant with colspan and % of width, but nothing work for me.
this is my latest result:
<tr class="mattersRow">
<td colspan="4">
</td>
<td class="editableCell qbmatter" colspan="14"></td>
<td class="editableCell workDate" colspan="4"></td>
<td class="editableCell hours" colspan="2"></td>
<td class="editableCell person" colspan="6"></td>
<td class="rate" colspan="2"></td>
<td class="editableCell amount" colspan="4"></td>
<td align="center"></td>
</tr>
<tr id="collapse63" class="helpRow in" style="height: auto;">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="4"></td>
<td colspan="2"></td>
<td colspan="4"></td>
<td colspan="2"></td>
<td colspan="16"></td>
<td colspan="4"></td>
</tr>
Can you help me to build this rows properly...

You're on the right track, but tables are designed to have rows and columns end at the same spots, so that little bit of extra space to the right of the 2nd cell in the first row, is either something that will be a ton of work to replicate, or will just be much easier to have them line up. Otherwise you'll start getting into nested tables and it will be more work than it's worth. You could always use a table building generator like TableGenerator

To get that sort of variation you need to have 2 different tables since it will try and align the td's

I would highly suggest putting those into divs with styling. It's pretty clear that you're not using them for tabular data - since you're using it for layout I suggest looking at this question here. This could be achieved relatively easily with some simple css.

Related

Why am I getting odd html table results with this standard syntax?

I'm using this code on my wordpress site but I'm getting odd results. I want to divide the table row into two columns, but I've ended up just gluing an extra bit on the side. what am I doing wrong?
<table>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
this is a test
</td>
<td style="padding:0px;">
as is this
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
</table>
and I get this weird little bit off the edge rather than the split I want:
Is it something to do with the aligned right image content in the table below possibly?
The number of columns in a table must be constant.
Add colspan="2" to your single cells.
A table has as many columns as the row with the most columns in it. If cells are missing from other rows, then they are left out from the rendering and cells are not stretched to fit.
Use colspan to make a cell take up multiple columns.
In your case, you don't appear to have tabular data at all, so don't use a table in the first place.
Your second row is two columns wide, but the remaining rows are still just one column in width. Either add a second column to each of the other rows, or extend the cells in the other columns so that they cover two columns, like this:
<tr>
<td style="padding:0px;" colspan=2>
deleted the content to make this less to read
</td>
</tr>
You'll need to do that for all the rows with just one column.

Table column width stretched

Can someone explain to me why my table isn't laying out the way I would expect?
The column displaying the phone numbers should be as wide as possible, but the cell with the email address is making the column with the number labels wider?
http://jsfiddle.net/NinjaArmadillo/UX3pH/
<table width='100%' border="1">
<tr>
<td rowspan='5'>PIC</td>
<td colspan='2'>First Lastname</td>
</tr>
<tr>
<td colspan='2'>Users Position</td>
</tr>
<tr>
<td colspan='2'>emailaddress.emailaddress#emailaddress.com</td>
</tr>
<tr>
<td><span>business:</span></td>
<td width='100%'><span>123-4567</span></td>
</tr>
<tr>
<td><span>mobile:</span></td>
<td width='100%'><span>765-4321</span></td>
</tr>
</table>
P.S. Please no "You should use DIVs!", I know, this is a small part of a much larger layout and I couldn't get everything to work with DIVs and I'm running out of time, v2.0 will be refactored to use DIVs (If I can get time to make them work)
This will help you td{width:5%}
Demo

Colspan with incorrect rows don't render correctly

http://jsfiddle.net/9p7Mx/1/
I'm sure this has been asked before but I can't find the correct search terms:
If you have an HTML table such as:
<table>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td> </td>
</tr>
</table>
The colspan=3 on the last row will not actually line up correctly because you don't actually have 4 td elements. If you look at my example link, I have two tables, one with two tds with colspan=2 and the last with four actual tds. In the first, the td elements are just mimicking 4 tds with their own colspan=2 and thus I assume the table has no way of knowing exactly how large a single colspan is since there is none. Without knowing the exact with on a single colspan, it appears the table doesn't know what to do.
If I can't change the number of td elements in the table, is it possible to get the same effect? I'd rather not assign a width using CSS, and assigning a width WILL work (tested) but I'd like to see if there is another way.
The markup violates the HTML table model, as http://validator.w3.org tells if you use it in HTML5 mode (“Table column 2 established by element td has no cells beginning in it.”). So you should expect inconsistent and unexpected rendering.
If your table logically has just three columns, make it so. Instead of trying to make some columns wider by using colspan, use CSS to set the widths. The colspan=2 attribute means just that the cell spans two columns. And you cannot validly span a column that does not exist.
Using classes and setting the width for the X% you want.
You must consider some divs instead of a table.

Complicated table using rowspan and colspan

I have to make a very complicated table similar to the one in the picture below.
http://irinaciocan.ro/tehnici_web_2012/imagini/tabel_ciudatel29.png
I tried this markup but it doesn't work well.
http://jsfiddle.net/miskolc/W9nJU/3/
<body>
<table border="10" cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" rowspan="1">1</td>
<td colspan="2" rowspan="1">2</td>
<td colspan="2" rowspan="1">3</td>
</tr>
<tr>
<td colspan="2" rowspan="4">4</td>
<td colspan="3" rowspan="2">5</td>
</tr>
<tr>
<td colspan="2" rowspan="2">6</td>
<td colspan="1" rowspan="4">7</td>
</tr>
<tr>
<td rowspan="4" colspan="1">8</td>
<td rowspan="1" colspan="1">9</td>
<td rowspan="1" colspan="1">10</td>
<td rowspan="2" colspan="1">11</td>
</tr>
<tr>
<td rowspan="1" colspan="2">12</td>
</tr>
<tr>
<td rowspan="3" colspan="1">13</td>
<td rowspan="1" colspan="3">14</td>
</tr>
<tr>
<td rowspan="1" colspan="2">15</td>
<td rowspan="1" colspan="1">16</td>
</tr>
<tr>
<td rowspan="1" colspan="2">17</td>
</tr>
</table>
</body>
AND the CSS
td {
width:50px;
height:50px;
padding:0px;
}
I don't understand why cell 6 remains on the same row as cell 5 even though they are inside different tr tags.
I also don't understand why cells 1,2,3 don't have the correct spaning sizes.
Can someone please tell me how to tackle this problem?
Your table should be a 5 columns per 8 rows table (before merging many cells).
All your rows should have a total of 5 columns (or colspan="2" followed by colspan="3" by example). This is the case of the first 2 ones but then it's wrong from the third to the last one.
No fiddle as I won't do it for you ;) Please provide a fiddle where the table is 5C x 8R if there remain(s) a problem
EDIT: OK solved it here: http://jsfiddle.net/W9nJU/5/
The main problem was with the 2nd and 3rd rows: while they've a double height when displayed and make the impression that they occupy 4 rows, they should - no they MUST - be made with only 1 row each.
So the 3 cells "1, 4 and 8" on the left span vertically over resp. 1, 2 and 5 cells (but the cell 4 is twice the height of a cell that would also be spannng over 2 rows).
Modifcations: cell "4" spans over 2 rows (not 4); "5" and "6" no vertical span and resp. span over 2 and 3 columns; cell "7" spans over 3 rows (not 4)
the cell "8" spans over 5 rows and not 4
I think there was, within cells labelled "9"-"17" another value off by 1 but I can't find it anymore. Maybe not.
You're not drawing on a sheet of paper with a fixed-size grid or on a checkerboard. An HTML table is a bit like topology where size doesn't matter and a ring, a mug, a donut and Saturn ring have the same characteristics: "it's just a torus" (if the ring of Saturn wasn't made of a million rings made of blocks... my analogy isn't so good)
At the time the HTML table algorithm build the cells, rows and columns from HTML code (and it can even do so with a few cells lacking!), it has no idea of the size they will have on a graphical browser or on a printer. And a screen reader couldn't care less about that. What is important is the minimal number of cells needed. CSS then use the result to style and display it.

Using colspan=2 in table cells with other cells without colspan i.e. colspan=1

I have come across with a problem regarding tables, to be more specific with the colspan attribute for the cells (td tag), I would like to do something like this:
*** ------- +++
------- *** +++
Where each symbol is a cell, as you might notice, the 2 column from the 1st row has a colspan=2 since is sharing it with the column number 1 and 2 from the 2nd row, meanwhile the 1st column from the row number 2 shares the space with the column number 1 and 2 from the 1st row.
I have tried (see code below), but of course (at least in chrome and in firefox) it doesn't work as expected. I think this is achievable but I am short of ideas and I will be really thankful for your suggestions.
<TABLE>
<TR>
<TD>1</TD>
<TD COLSPAN="2">2</TD>
<TD>3</TD>
</TR>
<TR>
<TD COLSPAN="2">4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
After some searching I have found the solution, it seems that you have to use the col tag, not sure why yet, but it works!
<TABLE>
<col style="width: 1px;">
<col style="width: 1px;">
<col style="width: 1px;">
<col style="width: 1px;">
<TBODY>
<TR>
<TD BGCOLOR="#CDB599"></TD>
<TD COLSPAN="2" BGCOLOR="#9CC5C9"></TD>
<TD BGCOLOR="#CDB599"></TD>
</TR>
<TR>
<TD COLSPAN="2" BGCOLOR="#D5544F"></TD>
<TD BGCOLOR="#CDB599"></TD>
<TD BGCOLOR="#CDB599"></TD>
</TR>
</TBODY>
</TABLE>
You don’t specify how you expect the markup to work, but the way it works is that slots in the second column are zero-width, as there is nothing that requires any minimum width for them. You can see this if you add a third row, with four normal cells:
<tr><td>foo<td>bar<td>more<td>stuff
Then the second column will take the width needed for “bar”.