CODEWITHSUNDEEP
htmlhtml-table
Hansi Zimmrer
Hansi Zimmrer

Reputation: 259

How to set different sized gaps between the columns of a HTML-table

How can I do the following using HTML and/or CSS: I want to create an HTML-table, lets say with three columns and the gab between column1 and column2 is greater than the gab between column2 and column3. Below an example:

 +----------+ +----------+    +----------+
 | column1  | | column2  |    | colum3   |
 +----------+ +----------+    +----------+
 |  ...     | |  ...     |    |  ...     |
 +----------+ +----------+    +----------+
 | column1  | | column1  |    | colum3   |
 +----------+ +----------+    +----------+

Upvotes: 0

Views: 97

Answers (2)

jforjs
jforjs

Reputation: 473

The property cellspacing which is generally used for providing space between two columns is applied on table not on individual columns. So to achieve your thing, you can either use cell padding for individual table.

Upvotes: 1

Samuel Cook
Samuel Cook

Reputation: 16828

I would just use padding on the different columns. In my example I use class names to describe the amount of padding i wish to have from the previous column.

<style type="text/css">
    td.col2{padding-left:10px;}
    td.col3{padding-left:50px;}
</style>

<table>
    <tr>
        <td class="col1">column1</td>
        <td class="col2">column2</td>
        <td class="col3">column3</td>
    </tr>
    <tr>
        <td class="col1">...</td>
        <td class="col2">...</td>
        <td class="col3">...</td>
    </tr>
    <tr>
        <td class="col1">column1</td>
        <td class="col2">column2</td>
        <td class="col3">column3</td>
    </tr>
</table>

Upvotes: 1

Related Questions