Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I would like a single <table> tag to render like this:
+_____+_____+_____+
| | | |
+_____+_____+_____+
| | | |
+_____+_____+_____+
| |
+________+________+
| | |
+________+________+
| | |
+________+________+
Possible? I am lost on this one. I've been tableless for a long time. Documentation on changing the column numbers half way through is not clear. I know it could be done with col-span if the shift in columns was even, but how to go from odd to even?
Explanation
Provide a colspan of two for those td's that only require one space, and then you'll be able to use 3 (which is actually 1.5) as the colspan for the other row. Maybe this isn't the best solution, but it's the first that I came up with.
The example only has two of the 3 types of rows you had in your example, but to add the whole width cell, just add a colspan of 6.
Code
<table>
<tr>
<td colspan=2></td>
<td colspan=2></td>
<td colspan=2></td>
</tr>
<tr>
<td colspan=3></td>
<td colspan=3></td>
</tr>
</table>
The Fiddle
Find the smallest common divisor, in this case 6, and set a colspan on each cell to divide that number by the number of cells in the row.
<table>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
</table>
Demo: http://jsfiddle.net/S5K8p/
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 months ago.
Improve this question
What would be the best idea way to have a table (I am not committed to <table> if other options are better) where:
The first column, third and fourth column width is as small as content will allow
The second column would expand to use all remaining spaced (not used by column 1, 3 and 4) without forcing line returns in the content
The column width is the same for all the lines in the table
I am trying to replicate what I would get with display:flex with <div>, where one child could grow, and the other not, but I want each column to have the same width across all rows.
Visual example, table would take full screen width, column width cannot be pre-defined:
------------------------------------------------------------------------
| ID | Title | Comments | Votes Count |
| 245325 | Lorem ipsum | 5 | 2 |
| 32 | Even longer title | 0 | 1 |
------------------------------------------------------------------------
Simply by setting the width of columns 1, 3, and 4 to 1% will force them to shrink to be as small as possible while expanding the second column to fill the remaining space:
td:first-child,
td:nth-child(3n),
td:nth-child(4n) {
width: 1%;
}
table,
td {
border: 1px solid #000;
}
<table style="width: 100%">
<tr>
<td>ID</td>
<td>Title</td>
<td>Comments</td>
<td>Votes</td>
</tr>
<tr>
<td>245325</td>
<td>Lorem ipsum</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>32</td>
<td>Even longer title</td>
<td>0</td>
<td>1</td>
</tr>
</table>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Now, I need a table like this in HTML.
I cannot assign the column with width. How can I get this table using HTML code
You can't have cells of arbitrarily different widths, this is generally a standard behavior of tables from any space, e.g. Excel, otherwise it's no longer a table but just a list of text.
You can however have cells span multiple columns, you can declare a col value of 5% and use colspan to create your custom width "cells".
It's definitely not elegant or practical but I can't think of any other way of doing this on a single table.
<table width="100%" border="1" bgcolor="#ffffff">
<col width="5%">
<tr>
<td colspan=20>Title 1</td>
</tr>
<tr>
<td colspan=1>A</td>
<td colspan=9>3</td>
<td colspan=10>4</td>
</tr>
<tr>
<td colspan=1>B</td>
<td colspan=9>6</td>
<td colspan=10>7</td>
</tr>
<tr>
<td colspan=1>C</td>
<td colspan=9>9</td>
<td colspan=10>10</td>
</tr>
<tr>
<td colspan=20>Title 2</td>
</tr>
<tr>
<td colspan=4>11</td>
<td colspan=4>11</td>
<td colspan=4>11</td>
<td colspan=4>12</td>
<td colspan=4>2</td>
</tr>
</table>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
HTML:
<table style="width:800px" class="space">
<tr style="height:120px">
<td colspan="1">1</td>
<td colspan="2">2</td>
</tr>
<tr style="height:100px">
<td rowspan="2">3</td>
<td>4</td>
<td rowspan="2">5</td>
</tr>
<tr style="height:100px">
<td>6</td>
</tr>
<tr style="height:60px">
<td colspan="2">7<td>
</tr>
</table>
CSS:
.space {
padding:0px;
border-spacing:1px;
}
Im trying to make an asymetrical table, but as you see if you try the code out I cant get the "7" table row to span all the way. Colspan="2" gives me a little unwanted border, Colspan="3" gives me another cell. I got no clue how to fix this, been at it for days.
Suggestions?
There's an error in your html for starters. (you forgot to close the td, so you have 2 tds in the last row)
<td colspan="2">6<td>
should be
<td colspan="3">6</td>
See: http://jsfiddle.net/4zdqM/
(td's colored red so you can see what's going on)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I tried looking up the answer to this as it seems simple enough using colspan and rowspan but for some reason I can't find the way to do the following table:
table cells number is 4: upper_left, upper_right, bottom_left, bottom_right
upper_left: 8 rows long
upper_right: 1 row long
bottom_left: 1 row long
bottom_right: 8 rows long
I don't have a pic but you can see both rows and cols are asymmetrical.
You need to do it like this. You cant use rowspan="8" in this case.
<table>
<tr>
<td rowspan="2">upper left</td>
<td>upper right</td>
</tr>
<tr>
<td rowspan="2">bottom right</td>
</tr>
<tr>
<td>upper bottom</td>
</tr>
</table>
If you ment cols instead of rows, then here it is:
<table>
<tr>
<td colspan="8">upper left</td>
<td>upper right</td>
</tr>
<tr>
<td>bottom right</td>
<td colspan="8">upper bottom</td>
</tr>
</table>
And with your edited CSS:
<table>
<tr>
<td colspan="8" style="width: 800px;">upper left</td>
<td style="width: 100px;">upper right</td>
</tr>
<tr>
<td style="width: 100px;">bottom right</td>
<td colspan="8" style="width: 800px;">upper bottom</td>
</tr>
</table>
I guess this schema of what i am trying to do will be more descriptive than the question itself.
+------------------------+-----------------------+
| | |
+ +-----------------------+
| | |
+------------------------+ +
| | |
+ +-----------------------+
| | |
+------------------------+-----------------------+
| | |
+------------------------+-----------------------+
As you can see, i am trying to create a 2 column table where at some point it should be able to rowspan one of the columns, and eventually the other over the next 2 rows.
Am i missing some obvious way of doing it, or some advanced table tag/attribute? Or there is just no way of doing that using tables?
I am aware that it is possible to achieve that using other ways, but tables are what i am interested in, and what is the question about.
For reference:
There are some things i've tried and didn't succeed
http://jsfiddle.net/dbtYk/
Unless I've missed something, here is an example based on your jsfiddle
<table>
<tr style="height:20px;">
<td rowspan="2">left</td>
<td>right</td>
</tr>
<tr style="height:20px;">
<td rowspan="2">right</td>
</tr>
<tr style="height:20px;">
<td rowspan="2">left</td>
</tr>
<tr style="height:20px;">
<td>right</td>
</tr>
<tr>
<td>left</td>
<td>right</td>
</tr>
</table>
UPDATE
As pointed out by Cicada the above unfortunately doesn't work in Chrome.
UPDATE 2
As pointed out by Alohci, adding a height makes it work in Chrome. The above has been amended to reflect that, along with a new jsfiddle.
Of course that is possible :-)
<table border="yes">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td rowspan="2">3</td>
</tr>
<tr>
<td rowspan="2">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</table>
Just skip the cells that are already covered by spanned cells from a previous row.