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.
Related
What I want is something like this:
<table>
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
</tr>
</table>
which creates a table like this:
but what I want is something like this:
I know I can easily make it with adding a new row and using rowspan to fix it, but if there is another way to do it without adding another row, it will be so great
You can implement that using rowspan.
<table border="1">
<tr>
<td rowspan="2">a1</td>
<td>a2</td>
<td rowspan="2">a4</td>
</tr>
<tr>
<td>a3</td>
</tr>
</table>
the answer I got after so many searches was this 2 without adding another Row:
adding both a2 a3 to another cell.
using grid system instead of table.
and there are other ways and the easiest ways is by adding another row, the code looks like this:
<table>
<tr>
<td rowspan="2">a1</td>
<td>a2</td>
<td rowspan="2">a4</td>
</tr>
<tr>
<td>a3</td>
</tr>
</table>
Is it possible to make each row/column in a table have it's own Unique height, that way if I wanted a table that looks like this, I could:
+-----------------------------+
| Data | Data | Data |
| Data +-----------+ Data |
| Data | Data | Data |
+--------+-----------+--------+
Sorry if this is not descriptive enough, as I don't know any other way to explain it. The goal is for this to be a single <table> that doesn't have the entire row's height effected by a single column. Each columns height is independent of the row.
You can achieve this layout by using the rowspan attribute
<table>
<tr>
<td rowspan="2">Data<br>Data<br>Data</td>
<td>Data</td>
<td>Data</td>
<td rowspan="2">Data<br>Data<br>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>
Use the rowspan attribute of the <td> element:
<table>
<tr>
<td rowspan="2">Data<br>
Data<br>
Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td rowspan="2">Data<br>
Data<br>
Data</td>
</tr>
</table>
Here is a sample JSFiddle.
Say I have the given table:
+------+------+------+
| Col1 | Col2 | Col3 |
+------+------+------+------+
| Row1 | D1.1 | D1.2 | D1.3 |
+------+------+------+------+
| Row2 | D2.1 | D2.2 | D2.3 |
+------+------+------+------+
| Row3 | D3.1 | D3.2 | D3.3 |
+------+------+------+------+
And I want to represent it in HTML5. The tricky thing is that tables like this must be semantically important, but the top-left cell is not semantically important, but instead a spacer to line up the more important column headers. What's the best way to do this? My first idea is to do it like this:
<table>
<thead>
<tr>
<th></th>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row1</th>
<td>D1.1</td>
<td>D1.2</td>
<td>D1.3</td>
</tr>
<tr>
<th>Row2</th>
<td>D2.1</td>
<td>D2.2</td>
<td>D2.3</td>
</tr>
<tr>
<th>Row3</th>
<td>D3.1</td>
<td>D3.2</td>
<td>D3.3</td>
</tr>
</tbody>
</table>
Though, putting <th></th> in there feels just wrong, like using <p> </p> for spacing. Is there a better way to do this?
It's completely acceptable to have an empty <th> element, speaking in terms of either validity or semantics. Nothing in the spec forbids it; in fact, it contains at least one example that makes use of an empty <th> for this very purpose:
The following shows how one might mark up the gross margin table on page 46 of Apple, Inc's 10-K filing for fiscal year 2008:
<table>
<thead>
<tr>
<th>
<th>2008
<th>2007
<th>2006
<tbody>
<tr>
<th>Net sales
<td>$ 32,479
<td>$ 24,006
<td>$ 19,315
<!-- snip -->
</table>
For a discussion about semantics and empty table elements I would like to refer to this question on StackOverflow
Styling of "empty" cells (like background or borders) can sometimes depend on the absence/presence of "content" that is why people often put a inside. There is a special CSS tag for styling empty cells you can read about it here on MDN.
table {
empty-cells: hide;
}
Here you can find another article with some nice background information on this topic.
Any better way of using empty <th></th>:
Exact code:
<tr>
<th></th>
<th colspan="6"></th>
</tr>
I have an HTML table 2x2.
In that table, I want the first row is not divided in two parts but only has one cell that occupies the full width of the table.
-------
| |
-------
| | |
-------
How can I do that?
Try the colspan attribute.
Use the colspan table cell attribute like this.
<table>
<tr>
<th colspan="2"></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
OK, i should use <th>.
<table>
<tr>
<td colspan = 2></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Use colspan along with <th> for the header row
<table>
<tr>
<th colspan="2"></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Given a table like this:
Col 1 | Col 2
1 2
1 3
2 4
...and could be any number of 1's, 2's, etc. in Col 1. I want to dynamically output something that would look like this:
<table>
<tr>
<td rowspan="2">
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
<tr>
<td rowspan="1">
2
</td>
<td>
4
</td>
</tr>
</table>
My issue is that, for the above html, I would have to count the number of distinct 1's to find the appropriate rowspan number, then go back and iterate through them for the html output. I was just wondering if there was an easier/quicker way to do something similar where I could just iterate through the records and add something once the next row in Col 1 is different than the last row's Col 1.
I read something that sounded like I could just use rowspan="0" for the first record, and divide the groups up by tbody tags like so:
<table>
<tbody>
<tr>
<td rowspan="0">
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="0">
2
</td>
<td>
4
</td>
</tr>
</tbody>
</table>
...and the rowspan="0" would just span the tbody section it is contained in. I haven't been able to find much info on this method, and I couldn't get it to work in IE or Firefox. So is there anything along those lines that would speed up my html rendering? Thanks in advance.
How about trying like this?
<table>
<tbody>
<tr>
<td rowspan="10">
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="10">
2
</td>
<td>
4
</td>
</tr>
</tbody>
</table>
At least on this table it looked like it worked in IE8 and FF 3.6. I'm assuming that if rowspan="10" works fine on a table with 3 rows that has 2 sections (2 rows first, 1 row second) then rowspan="10000" should work as well.
Edit: oh yea, according to a couple of sites, the rowspan="0" works correctly so far only in Opera.