CODEWITHSUNDEEP
htmlcss
user3880405
user3880405

Reputation: 15

Indenting Table columns using Css and HTML

I have created a table using HTML , but the columns headers are just too close to each other and therefore i'd like to space them out using css.

in my HTML , I have created a table with headers like this:

<table class="DataTable">

        <thead>
            <tr>

                <th>School</th>
                <th>First Namer</th>
                <th>Last Name</th>
                <th>Sport</th>
                <th>Enrollment Date</th>
            </tr>
        </thead>


    </table>

and in my Css file:

table.DataTable {

    border: 1px solid #79bbff;
//nothing much here , but how do I space out the headers?

}

Thank you

Upvotes: 1

Views: 1187

Answers (4)

Deepanshu J bedi
Deepanshu J bedi

Reputation: 1530

table.DataTable th {
    padding-left: 4px;
    padding-right: 8px;
}

you can adjust the look and feel.

Upvotes: 0

Swaraj
Swaraj

Reputation: 383

A padding is something you would need here.

http://jsfiddle.net/uuQ64/

th {
 padding:10px;
}

You can use this property to specify different padding for different sides. Find more in that link.

Upvotes: 0

Valentin Mercier
Valentin Mercier

Reputation: 5326

Your best bet is to add the following CSS rules:

table.DataTable th {
    padding-left: 5px;
    padding-right: 5px;
}

Adjust then the padding pixel size to your taste.

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128791

If it's the text you're wanting to space out a bit, you can use padding:

table.DataTable th {
    padding: 4px 8px;
}

A value of 4px 8px will set the top and bottom padding to 4px and the left and right padding to 8px.

Example

JSFiddle demo.

This is equivalent to using:

table.DataTable th {
    padding-top: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 4px;
}

Upvotes: 3

Related Questions