CODEWITHSUNDEEP
htmlcsshtml-table
Sam Carleton
Sam Carleton

Reputation: 1398

Add spacer column to HTML table

I need to layout data in a long, 13 column table. But it needs to look like two tables with some space between column 10 and 11. How is that done in HTML? My first thought is a 14 column table with the 11th column taking up space but not visible. I cannot figure out how to do that, though.

Upvotes: 4

Views: 20566

Answers (3)

Bob Inscoe
Bob Inscoe

Reputation: 1

Try this example and see if it's to your liking ... 5 cols with a spacer between cols 2 and 4. It could be improved but I think it's got the look you're after.

<table cols=5 style='border:thin solid blue'>
  <tr>
    <th style='border:thin solid blue'>Col 1</th>
    <th style='border:thin solid blue'>Col 2</th>
    <th>&nbsp</th>
    <th style='border:thin solid blue'>Col 3</th>
    <th style='border:thin solid blue'>Col 4</th>
  </tr>
  <tr>
    <td style='border:thin solid blue'>Col 1A</th>
    <td style='border:thin solid blue'>Col 1B</th>
    <td>&nbsp</th>
    <td style='border:thin solid blue'>Col 1D</th>
    <td style='border:thin solid blue'>Cell 1E</th>
  </tr>
</table>

Upvotes: -2

isherwood
isherwood

Reputation: 61083

If you'd rather not have empty table cells, which may be strange for the visually-impaired, try this.

td {
  display: inline-block;
  background: pink;
}

td.spaced {
  margin-left: 20px;
}
<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td class="spaced">Three</td>
  </tr>
</table>

Upvotes: 4

Explosion Pills
Explosion Pills

Reputation: 191749

I think that this is more of a CSS question, but it can be done easily with :nth-child. Create the empty table cell as the 11th column and use:

td:nth-child(11) {
    border: 0;
}

http://jsfiddle.net/ExplosionPIlls/rZYRd/

Upvotes: 1

Related Questions