Delowar Hosain
Delowar Hosain

Reputation: 2359

HTML table offset one column

How can I offset one column in a table row? I've used colspan but it takes two columns width, but I want to like this image.

enter image description here

Here is my code:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 5px 15px;
    text-align: left;    
}
<table> 
    <tr> 
        <th colspan="2">65</th> <th colspan="2">40</th> 
        <th colspan="2">20</th> 
    </tr> 
    <tr> 
        <th>Men</th> 
        <th>Women</th> 
        <th>Men</th> 
        <th>Women</th> 
        <th>Men</th> 
        <th>Women</th> 
    </tr> 
    <tr> 
         <td>85</td> 
         <td>78</td> 
         <td>82</td> 
         <td>77</td> 
         <td>81</td> 
    </tr> 
</table>

Upvotes: 3

Views: 22582

Answers (2)

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

Your HTML markup isn't valid with the missing <td> element on the third row. You get the following warning on the HTML checker:

A table row was 5 columns wide, which is less than the column count established by the first row (6).

So you have to set a (empty) cell, but you can hide this cell with CSS. To hide the empty cell you can use the :empty and :blank (is a draft at the moment) pseudo-classes. There is no need to set a class for the empty cell.

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px 15px;
  text-align: left;    
}
td:empty {
  visibility:hidden;
}
td:blank {
  visibility:hidden;
}
<table> 
  <tr> 
    <th colspan="2">65</th>
    <th colspan="2">40</th> 
    <th colspan="2">20</th> 
  </tr> 
  <tr> 
    <th>Men</th> 
    <th>Women</th> 
    <th>Men</th> 
    <th>Women</th> 
    <th>Men</th> 
    <th>Women</th> 
  </tr> 
  <tr>
    <td></td>
    <td>85</td> 
    <td>78</td> 
    <td>82</td> 
    <td>77</td> 
    <td>81</td> 
  </tr> 
</table>

Upvotes: 6

Roy Bogado
Roy Bogado

Reputation: 4472

th, td {

  border: 1px solid black;
  border-collapse: collapse;

}
th, td {
  padding: 5px 15px;
  text-align: left; 
vertical-align:top;   
}

td.empty{ border: 0;}
    <table cellspacing="0"> 
        <tr> 
            <th colspan="2">65</th> <th colspan="2">40</th> 
            <th colspan="2">20</th> 
        </tr> 
        <tr> 
            <th>Men</th> 
            <th>Women</th> 
            <th>Men</th> 
            <th>Women</th> 
            <th>Men</th> 
            <th>Women</th> 
        </tr> 
        <tr> 
            <td class="empty"></td> 
            <td>85</td> 
            <td>78</td> 
            <td>82</td> 
            <td>77</td> 
            <td>81</td> 
        </tr> 
    </table>

Upvotes: 4

Related Questions