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).
Related
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.
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
I'm trying to program a javascript timeline, in which you click on the left column revealing something in the right column. I suppose there are easier ways to do this, but the HTML below looks really really neat.
So the usual way rowspan works is that you have a td that you want to extend down a few rows to complete the table.
<tr>
<td>1942</td>
<td rowspan=2>Something happened</td>
</tr>
<tr>
<td>2017</td>
</tr>
However, what if I want to rowspan upwards, so that the below timeline item fills both rows?
<tr>
<td>1942</td>
</tr>
<tr>
<td>2017</td>
<td rowspan=2>Something else happened</td>
</tr>
I know I can just move them all to the top row and rowspan from there, but I really want to have this nice, easy-to-edit format, with dates and rows right next to each other.
(An idea I had was that if you think of rowspan as analogous to css width and height, there might be something analogous to css left and top (like "table-row"?) you could set, other than actually moving the td's to the tr you want. I don't think that exists, though.)
(also, does anyone know if negative rowspan is defined?)
No, rowspan always works “downwards”. HTML 4 does not explicitly say this, but it is definitely implied, and there is no way to change it. HTML5 makes it explicit, in its boringly detailed (but necessary for implementors) Processing model for tables.
I know this is an old question, but I was looking for this myself and this is the first result on google. After a bit of tweaking, I’ve managed to find a solution:
<table>
<thead>
<tr>
<td>Column 1/<td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan=2>A1</td>
<!--This cell must be hidden; otherwise you will see a gap at the top of the second column between the header and body-->
<td style=“padding:0px;” />
</tr>
<tr>
<td rowspan=3>A</td>
</tr>
<tr>
<td>A2</td>
</tr>
<tr>
<td>A3</td>
</tr>
</tbody>
</table>
You might have to experiment a bit if you want to have a hierarchy deeper than 2 columns, but I’m confident it’s possible.
Consider the scenario like this.
I have Array List of string arrays.
I want to represent them in the image shown below.
currently I have implemented this as Table. But this is not dynamic. Going forward I have to loop twice which seems some what difficult.
<table>
<tr>
<td>Pack1</td>
<td>Ch1</td>
</tr>
<tr>
<td></td>
<td>ch2</td>
</tr>
<tr>
<td>Pack2</td>
<td>val1</td>
</tr>
<tr>
<td></td>
<td>val2</td>
</tr>
</table>
Please let me know any other approach using css styles.
Loop through every pack
Again loop through each pack to get the values.
This will likely be a little bit of a hot-potato as it's not entirely clear what you want exactly though I've posted a bit of a more structured table format that seems to resemble your goal. If you know how to use colspan and rowspan then you can adjust the table (e.g. if you want multiple rows on a single column) though consider how tables are intended and mostly style by default. I've added some CSS and text to help give you an idea of how (X)HTML tables work when you take advantage of things.
As far as looping I think you can apply the idea of "packages" to tbody elements that are like partitions of a table...they're part of the same kind of data though have their own separate groups.
Comment if you need help adjusting this, it's not difficult.
<table summary="Describe your table here." style="border: 1px solid #aaa; border-collapse: collapse; width: 40%;">
<thead style="background-color: #f77;">
<tr><td colspan="3">Table Header</td></tr>
</thead>
<tfoot style="background-color: #f77;">
<tr><td colspan="3">Table Footer</td></tr>
</tfoot>
<tbody>
<tr style="background-color: #fcc;"><th colspan="3">Pack 1 (Tbody Header)</th></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
</tbody>
<tbody>
<tr style="background-color: #fcc;"><th colspan="3">Pack 2 (Tbody Header)</th></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
</tbody>
</table>
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”.