How the table span works? - html

What I would like to do:
What did I wrote:
<table>
<TR>
<TD ROWSPAN="4">left</TD>
<TD ROWSPAN="12">middle</TD>
<TD ROWSPAN="3">right</TD>
</TR>
<TR>
<TD ROWSPAN="4">left2</TD>
<TD ROWSPAN="3">right2</TD>
</TR>
<TR>
<TD ROWSPAN="4">left3</TD>
<TD ROWSPAN="3">right3</TD>
</TR>
<TR>
<TD ROWSPAN="3">right4</TD>
</TR>
</table>
It turns out with this:
I would like the table have same height, I can work in this way, but it is not the same height:
<table>
<TR>
<TD>left</TD>
<TD ROWSPAN="12">middle</TD>
<TD>right</TD>
</TR>
<TR>
<TD>left2</TD>
<TD>right2</TD>
</TR>
<TR>
<TD>left3</TD>
<TD>right3</TD>
</TR>
<TR>
<TD>right4</TD>
</TR>
</table>
and the result like this:


Got it! The trick was having a total of twelve <tr>s, even though some of them are empty.
As a point of curiosity, I solved this by making the table in excel, saving as html, and deleting all of the inline styles that excel puts in there.
td {
border: 1px solid black;
}
<table>
<tr>
<td rowspan=4>left</td>
<td rowspan=12>middle</td>
<td rowspan=3>right</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td rowspan=3>right2</td>
</tr>
<tr>
<td rowspan=4>left2</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan=3>right3</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan=4>left3</td>
</tr>
<tr>
<td rowspan=3>right4</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

Related

html table rowspan not working correct in safari

It is the expected result and working fine in chrome.
But It broke in safari
JS Fiddle: https://jsfiddle.net/evpb3zLa/
<tbody>
<tr>
<td rowspan="6">6</td>
<td rowspan="6">6</td>
<td rowspan="2">2</td>
<td rowspan="3">3</td>
</tr>
<tr></tr>
<tr>
<td rowspan="2">2</td>
</tr>
<tr>
<td rowspan="3">3</td>
</tr>
<tr>
<td rowspan="2">2</td>
</tr>
<tr></tr>
<tr>
<td rowspan="2">2</td>
<td rowspan="2" colspan="3">2</td>
</tr>
</tbody>
</table>

Didn't found any solution on safari rowspan problem, but ended up using nested tables. That works like a charm xD.
table, td, th {
border: 1px solid;
border-collapse: collapse;
padding: 5px;
}
<table>
<tbody>
<tr>
<td rowspan="6">6</td>
<td rowspan="6">6</td>
<td rowspan="2">
<table class="sub-table">
<tbody>
<tr>
<td>fixed-1</td>
</tr>
<tr>
<td>fixed-2</td>
</tr>
<tr>
<td>fixed-3</td>
</tr>
</tbody>
</table>
</td>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="3">3</td>
</tr>
<tr></tr>
<tr></tr>
</tbody>
</table>

How to span a column equal to one and half column in html table

In this image two columns are spanned equal to three columns
How can I achieve this in my situation,
<table border="1">
<tr>
<td colspan="3">Top</td>
</tr>
<tr>
<td>Left</td>
<td>Center</td>
<td>Right</td>
</tr>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</table>

<table border="1">
<tr>
<td colspan="6">Top</td>
</tr>
<tr>
<td colspan="2">Left</td>
<td colspan="2">Center</td>
<td colspan="2">Right</td>
</tr>
<tr>
<td colspan="3">Left</td>
<td colspan="3">Right</td>
</tr>
</table>

How to set the entire row height twice as the others in html table

I have two tables. One with additional invisible <td> and one without. The problem is that the second table's rowspan is not working, the entire row just collapses. How could I get the result like in the first table without adding that unnecessary <td>?
HTML:
.table-height td {
height: 30px;
}
.invisible {
width: 1px;
}
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
<td className='invisible'></td>
</tr>
<tr>
<td className='invisible'></td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td className='invisible'></td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td className='invisible'></td>
</tr>
</tbody>
</table>
</p>
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
</table>
</p>

Finally I got it right. I just need to set the height for <tr> too (same as for </td>)
.table-height td, tr {
height: 30px;
}
.invisible {
width: 1px;
}
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
</table>
</p>

setting rowspan in td table

i wanna create something like this in my table
i try with this code, but the result far from what i want
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
</tr>
<tr>
<td>SubItem1a</td>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1a</td>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
or
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
<td>
<tr>SubItem1a</tr>
<tr>Subitem1b</tr>
<tr>Subitem1c</tr>
</td>
<td>
<tr>AnotherSub1a</tr>
<tr>AnotherSub1b</tr>
<tr>AnotherSub1c</tr>
</td>
</tr>
</table>
how to archive table like image?

Now used to this code rowspan Attribute
<table border="1" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<tr>
<td rowspan="3" align="center">No</td>
<td rowspan="3" align="center">Item1</td>
<td>SubItem1a</td>
<td>SubItem1a</td>
</tr>
<tr>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>

This will help with your future reference.
I did some example hopefully you understand what is rowspan and colspan.
<h1> Without using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td>10</td>
<td >20</td>
<td >30</td>
<td >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using colspan </h1>
<table border="1">
<tr>
<th colspan="5">Hello World</th>
</tr>
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
DEMO

How to code swirl like table in HTML?

See this:
_____ __
|_____| |
| |__|__|
|__|_____|
How to code it in HTML?

<table border="1">
<tr>
<td colspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>

Try this :-)
<table>
<tr>
<td colspan=2>top left</td>
<td rowspan=2>top right</td>
</tr>
<tr>
<td rowspan=2>lower left</td>
<td>center</td>
</tr>
<tr>
<td colspan=2>lower right</td>
</tr>
</table>
It produces

use colspan and rowspan, and set height and width.
<table border=1 height=400 width=400>
<tr>
<td colspan=2>1</td>
<td rowspan=2>3</td>
</tr>
<tr>
<td rowspan=2>4</td>
<td>5</td>
</tr>
<tr>
<td colspan=2>8</td>
</tr>
</table>

http://jsfiddle.net/2b9K3/
<table>
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>

This can be done pretty easily with rowspans and colspans.