Complicated table using rowspan and colspan - html

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.

Related

How to change the width of individual table cells (<td>)

I'm creating a very complex table and I want to know how to change the width of an individual table cell without affecting the other cells in the column.
<table border="1" class="table table-bordered">
<tr>
<td width="25%"><b>SURNAME</b></td>
<td width="25%"><b>First Names</b></td>
<td width="10%"><b>Decorations</b></td>
<td width="20%"><b>Current Appointment</b></td>
<td width="5%"><b>Date</b></td>
<td width="15%"><b>File Number</b></td>
</tr>
<tr>
<td width="10%"><b>Department</b></td>
<td width="10%"><b>Geographical location</b></td>
<td width="15%"><b>Substantive Appointment</b></td>
<td width="5%"><b>Date</b></td>
<td width="10%"><b>Terms of Engagement</b></td>
<td width="55%"><table class="table table-condensed text_size">
<thead class="text-gray-b">
<tr>
<td><b>Date Entry Made</b></td>
<td><b>Salary Scale</b></td>
<td><b>Basic Salary p.a.</b></td>
<td><b>Indicement Pay p.a.</b></td>
<td><b>Date paid from</b></td>
<td><b>M.</b></td>
<td><b>Yr</b></td>
<td><b>AUTHORITY</b></td>
<td><b>Signature (Certified By)</b></td>
<td><b>Name Stamp (Certified By)</b></td>
</tr>
</thead>
<tbody>
<tr>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
For example now I tried using the 'width' attribute to change the widths of two cells in the same column (SURNAME & Department), but it seems the size of the cells in the same column can't have different widths.
Is there a way for table cells (td) in the same column to have different widths?
have you tried colspan attribute of the td element , you can use numbers like 1 and 2 etc
when you need the td to take width of 2 columns etc
That's not possible - the special thing (layout-wise) about a table is exactly that, that all cells in a column will always automatically have the same width and all cells in a row will always automatically have the same height.
The only (kind of...) exception are colspan and rowspan attributes inside the td tags which determine that that particular cell takes the space of itself and the subsequent cell/s (depending on the number value in that attribute). However, then you have to be careful to put accordingyl less cells in a row or column, so that the overall number stays the same (regular cells counted as 1, the others by their colspan or rowspan value)

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

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.

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”.

Table layout with 4 columns in HTML not working

I am common table layout return in pure html which has 4 columns
<table>
<colgroup span="1" width="20%"/>
<colgroup span="1" width="30%"/>
<colgroup span="1" width="20%"/>
<colgroup span="1" width="30%"/>
<tr>
<td colspan="3">
question data.......
</td>
<td colspan="1">
Answer data......
</td>
</tr>
<tr>
<td colspan="2">
question data.......
</td>
<td colspan="2">
Answer data......
</td>
</tr>
</table>
This layout should work fine with first row columns should have width of 70 and 30% resp
and second row should have width of 50 and 50 resp. But the output what i see different.
what could be the problem and how to fix it. I couple of solutions for it
1. defining width at column level will work
2. defining a blank row with four columns above or below.
But Why is this happening?
In my experience, assigning a column width when using colspan doesn't work. I don't know why, but the width spec seems to be ignored - anyway, it never seems to do what you would expect.

Need help to fix this HTML table

I am trying to make an HTML table like this:
Name Price Original Value
RED ALL 50 10
A 980 100
B 75 45
YELLOW ALL 500 100
A 550 150
B 80 40
I came up with this but its wrong and looks ugly :( http://jsbin.com/ayixi
Your example updated and working.
I don't know what you were doing in the example because you're missing data etc... The simplest thing to do is just show you how to go about it. Only one of your columns needs a colspan, and only one of your rows needs rowspans to span the rows... (the name column and the color grouping for the rows)
<style>
th {
text-align:left;
}
.endofrow td {
padding-bottom:1em;
}
</style>
<table width="50%" border=1>
<tr><th>Name<th colspan=2>Price<th>Original Value</tr>
<tr><td rowspan=3 valign=top>Red<td>ALL<td>50<td>10</tr>
<tr><td>A<td>980<td>100</tr>
<tr class="endofrow"><td>B<td>80<td>50</tr>
<tr><td rowspan=3 valign=top>Yellow<td>ALL<td>500<td>100</tr>
<tr><td>A<td>980<td>100</tr>
<tr class="endofrow"><td>B<td>80<td>50</tr>
</table>
(note, I've left out the closing tags as they will be filled in and it's easier to read the tables without them)
If you want a space between rows, don't use a <br> or a <br />, they are both a poor solution to the problem. You want to add a class to the final row of that group and put some padding in there. That's the most semantically correct thing to do, and you avoid mixing in line breaks where they don't belong.
You need to look at the colspan and rowspan values. For example in your Table there is the following entry:
<td CLASS="trheadermain" colspan=2 rowspan=3 align="center" height=17>
<B>NAME</B></td>
The rowspan=3 is making the NAMElabel take up too much space
There are some <br> elements that where they don't belong:
</tr>
<br><br><br>
<tr height=20 bgColor=>
You may want to modernize your HTML: use <br /> in place of <br>, <strong> in place of <b>, colspan="2" in place of colspan=2, etc.
The rowspans on the Name, Price and Original Value cells are breaking your layout. It should work alright without these.
<td CLASS="trheadermain" colspan=2 rowspan=3 align="center" height=17 ><B>NAME</B></td>
<td rowspan=2 CLASS="trheadermain" ><B>Price</B></td>
<td rowspan=2 CLASS="trheadermain" ><B>Original Value</B></td>
->
<td CLASS="trheadermain" colspan=2 align="center" height=17 ><B>NAME</B></td>
<td CLASS="trheadermain" ><B>Price</B></td>
<td CLASS="trheadermain" ><B>Original Value</B></td>