Table layout with 4 columns in HTML not working - html

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.

Related

Different widths being specified on each row of a table

Anyone know why each width:xx% on the table cells are not being used?
Looks like the first row may be set correctly, but the sizes in the second row are being ignored.
http://jsfiddle.net/bobbyrne01/4fLL8md0/1/
<table>
<tr>
<td style="width:80%;">A lot of text on 1 line</td>
<td style="width:20%">Text</td>
</tr>
<tr>
<td style="width:20%">
<label>Directory:</label>
</td>
<td style="width:80%">
<input id="directory" readonly="true" />
</td>
</tr>
</table>
It's not possible any simply way. You can achive that only using more than 2 cells in row and group them.
<table border="1" width="100%">
<col width="20%">
<col width="60%">
<col width="20%">
<tr>
<td colspan="2">A lot of text on 1 line</td>
<td>Text</td>
</tr>
<tr>
<td>
<label>Directory:</label>
</td>
<td colspan="2">
<input id="directory" readonly="true" />
</td>
</tr>
</table>
http://jsfiddle.net/4fLL8md0/2/
As you can see, for this case you need 3 cells with width 20%, 60% and 20%. If you have more rows, more cells or want to divide rows in other percentages, you always need to change the table structure.
Table cells must conform – otherwise it wouldn't be a table! You can use colspan to sorta overcome this limitation.
The way you are trying to achieve the design is totally wrong. There are two ways to do this either use colspan or nested table to achieve this.
You can try the answer given by Panter or try nested table that is the best option as it will be easier to implement and maintain also.

HTML pyramid-like tables

Yesterday a friend has shown me a weird problem he has encountered in his classes. He could not make a pyramid-like table(as shown in my jsfiddle link below).
I've never really dealt with html tables much, but I thought this was just about the program they were using being stupid. But when I tried writing html for it myself, I saw it was more than that...
This is what I was trying:
http://jsfiddle.net/5aDkL/
<table border="1">
<tr>
<td colspan="1">A</td>
<td colspan="1">B</td>
<td colspan="2">C</td>
<td colspan="1">D</td>
<td colspan="1">E</td>
</tr>
<tr>
<td colspan="1">F</td>
<td colspan="2">G</td>
<td colspan="2">H</td>
<td colspan="1">I</td>
</tr>
<tr>
<td colspan="2">J</td>
<td colspan="2">K</td>
<td colspan="2">L</td>
</tr>
</table>
As you can see, the table doesn't look anything like you would expect(unless you know about this already).
So after some web searching, I came up with the following, which works fine(with a single line of css):
http://jsfiddle.net/SzWHX/
<table border="1">
<col>
<col>
<col>
<col>
<col>
<col>
<tr>
<td colspan="1">A</td>
<td colspan="1">B</td>
<td colspan="2">C</td>
<td colspan="1">D</td>
<td colspan="1">E</td>
</tr>
<tr>
<td colspan="1">F</td>
<td colspan="2">G</td>
<td colspan="2">H</td>
<td colspan="1">I</td>
</tr>
<tr>
<td colspan="2">J</td>
<td colspan="2">K</td>
<td colspan="2">L</td>
</tr>
</table>
But I was wondering, is there a better way to code this?
I mean, those empty col elements just look silly there, right?
So if anyone can enlighten me, that would be much appreciated.
That "pyramid" looks really ugly:
Especially obvious when you look at the table without borders:
Wouldn't a better compromise be to add the necessary empty ( ) cells so that the spacing is correct? I set all the columns to a width of 20px, you can do this with css without use of col in the below example if desired.
One last comparison:
There is no simpler way at present. This is a good example of a case where the col element is really needed (for the intended styling). The reason is that otherwise there is no way to refer to the 3rd and 4th column in CSS, since no table cell occupies only one slot in such a column.
In theory, the :nth-column() pseudo-class would let us do the styling without the col elements, but it’s really work in progress, being planned (CSS Selectors Level 4).

Table rendering with cols and colspan on tds in IE9

I am making HTML-tables to show data, and I have a varying number of columns in the tables, but want to keep the same number of "columns in the background", to have consistent widths of the columns.
The reason for this is specific to my application and is not relevant to the problem, since this seems to be a bug (or have I misunderstood how col's and colgroup's should work?)
In the HTML I show here I have reduced the number of actual columns to two.
I make my tables using a colgroup like this, and setting the width on the col element with CSS:
Table1:
<table>
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td colspan="1">col1</td>
<td colspan="1">col2</td>
</tr>
<tr>
<td colspan="2">col1</td>
</tr>
</tbody>
</table>
Table 2:
<table>
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td colspan="2">col1</td>
</tr>
<tr>
<td colspan="2">col1</td>
</tr>
</tbody>
</table>
CSS:
col {
width:100px;
}
Both these tables render fine in FireFox, Chrome, IE7 and IE8 (where 'IE' stands for 'Internet Explorer').
In IE9, however, Table 2 is rendered with the width of just one column.
I've tried both with and without table-layout: fixed
I have made a fiddle with these tables, and also the tables with all whitespace removed, to illustrate that this is not related to that table rendering bug in IE9: http://jsfiddle.net/ketnp/1/

IE9.0 and colgroup / colspam issue

IE 9.0 does not render following HTML correctly and I am out of ideas......
Please help.
I CANNOT change "< !DOCTYPE html >". any ideas ?
Thanks.
<!DOCTYPE html>
<html lang="en">
<body>
<table style="table-layout:fixed;" width="100%" border="1">
<colgroup span="120">
</colgroup>
<tbody>
<tr>
<td colspan="120">AAAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr>
<td colspan="15">aa</td>
<td colspan="15">ss</td>
<td colspan="90">dd</td>
</tr>
<tr>
<td colspan="120">zzzzzzzz</td>
</tr>
</tbody>
</table>
Colspan = number of columns to combine into a single cell. I am affraid you use it to set width of a column. And that's wrong. Use CSS width property to set width of a column.
<td width="120" colspan="3">
(that was plain HTML) or with CSS
<td style="width:120px" colspan="3">
The markup violates the HTML table mode, as the W3C Markup Validator would tell you, in its somewhat cryptic way. The colspan attribute specifies the number of table columns that a cell spans. You cannot span 120 columns when there are only 3 columns.
It seems to me that what you really want is to divide the available width between the columns so that the relations are 15 : 15 : 90. Simplify this to 1 : 1 : 6 and then turn them to percentages:
<table style="table-layout:fixed;" width="100%" border="1">
<col width="12.5%">
<col width="12.5%">
<col width="75%">
<tbody>
<tr>
<td colspan="3">AAAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr>
<td>aa</td>
<td>ss</td>
<td>dd</td>
</tr>
<tr>
<td colspan="3">zzzzzzzz</td>
</tr>
</tbody>
</table>
Using fixed layout, the widths of columns are determined when the first row is processed. Therefore, the widths need to be set in col elements. Otherwise, the browser, when processing the first row, would not have any width requirements, so it would, by the specs, divide the total space evenly between the columns.

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