Add separator column to HTML table
I need to display data in a long table of 13 columns. But it should look like two tables with some space between columns 10 and 11. How is this done in HTML? My first thought is a 14th column with an 11th column taking up space but not visible. However, I cannot figure out how to do this.
If you prefer not to have empty table cells, which might be strange to the visually impaired, try this.
<style type="text/css">
td {display: inline-block;}
td.spaced {margin-left: 20px;}
</style>
<table>
<tr>
<td>One</td>
<td>Two</td>
<td class="spaced">Three</td>
</tr>
</table>
http://jsfiddle.net/eS3QE/
I think this is more of a CSS question, but it's easy to do with :nth-child
. Create an empty table cell as the 11th column and use:
td:nth-child(11) {
border: 0;
}
http://jsfiddle.net/ExplosionPIlls/rZYRd/
Try this example and see if you like it ... 5 cols with a delimiter between cols 2 and 4. This could be improved, but I think it got what you need.
<html>
<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> </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> </th>
<td style='border:thin solid blue'>Col 1D</th>
<td style='border:thin solid blue'>Cell 1E</th>
</tr>
</table>
</html>