CODEWITHSUNDEEP
html
Peter Pik
Peter Pik

Reputation: 11193

Merge several tables together

I'm trying to merge tables together by using colspan, but cant seem to create my table. How can i merge tables columns together like following:

enter image description here

Upvotes: 1

Views: 69

Answers (2)

Naveen Setty
Naveen Setty

Reputation: 625

Here is the solution

HTML code is here:

<table width="500" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td rowspan="2">&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

CSS code is here :

table,td {
    border-collapse: collapse;
}

JS fiddle Link : http://jsfiddle.net/naveenkumarpg/543c3896/

if you need exact widths for td's you have to use class selector and adjust accordingly

Upvotes: 0

j08691
j08691

Reputation: 207901

The general layout would be:

table,
td {
  border: 1px solid #000;
}
table {
  width: 50%;
  border-collapse: collapse;
}
<table>
  <tr>
    <td rowspan="2">&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Upvotes: 3

Related Questions