CSS Tutorial
CSS Properties
CSS Advance
CSS Design
CSS Questions
Miscellaneous
CSS MCQ
- css-mcq
Interview Questions
- css-interview-questions

CSS code:

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
}
table#alter tr:nth-child(even) {
    background-color: #eee;
}
table#alter tr:nth-child(odd) {
    background-color: #fff;
}
table#alter th {
    color: white;
    background-color: gray;
}
</style>

Output:

Next TopicCSS Box Model

← prev next →

next → ← prev

CSS Table

We can apply style on HTML tables for better look and feel. There are some CSS properties that are widely used in designing table using CSS:

border
border-collapse
padding
width
height
text-align
color
background-color

CSS Table Border

We can set border for the table, th and td tags using the CSS border property.

<style>
table, th, td {
    border: 1px solid black;
}
</style>

Test it Now

Output:

      

       
        
         First_Name
         Last_Name
         Marks
        

        
         Sonoo
         Jaiswal
         60
        

        
         James
         William
         80
        

        
         Swati
         Sironi
         82
        

        
         Chetna
         Singh
         72

CSS Table Border Collapse

By the help of border-collapse property, we can collapse all borders in one border only.

<style>
table, th, td {
    border: 2px solid black;
    border-collapse: collapse;
}
</style>

Test it Now

Output:

CSS Table Padding

We can specify padding for table header and table data using the CSS padding property.

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
}
</style>

Test it Now

Output:

CSS Table: Styling even and odd cells

We can style even and odd table cells for better look and feel. In this code, we are displaying different background colors on even and odd cells. Moreover, we have changed the background-color and color of

tag.

Hot Tutorials

Contact US

Email:[email protected]

CSS Tutorial

CSS Properties

CSS Advance

CSS Design

CSS Questions

Miscellaneous

CSS MCQ

Interview Questions

CSS Table

CSS Table Border

CSS Table Border Collapse

CSS Table Padding

CSS Table: Styling even and odd cells

Hot Tutorials

Contact US