Clever Geek Handbook

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.

+3


source to share


3 answers


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/

+3


source


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/

+1


source


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>&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>
</html>
-1


source






More articles:


All Articles