123
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.
Output:
| First_Name | Last_Name | Marks |
|---|---|---|
| tutor | aspire | 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.
Output:
| Name | Last Name | Marks |
|---|---|---|
| tutor | aspire | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
CSS Table Padding
We can specify padding for table header and table data using the CSS padding property.
Output:
| Name | Last Name | Marks |
|---|---|---|
| tutor | aspire | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
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 <th> tag.
CSS code:
Output:
Next TopicCSS Box Model