How to Style a Table with CSS
See CSS: Tips and Tricks for similar articles.Back before CSS, people used HTML tables to lay out web pages. The rule is the same now as it was then: tables should not be used to lay out pages. They should be used for tabular data, such as financial reports or a meeting agenda. To style tables with CSS, you should first be familiar with HTML table syntax.
The following is a list of the CSS you can use in tables, the tags you can use them with, and a brief description of each:
CSS | Tags | Description |
border-spacing | table | Specifies the space between adjacent borders and the content surrounding the table. |
border-collapse | table | Takes the values separate and collapse . Used to indicate whether adjacent borders should be merged (collapse) or not (separate). |
padding | table | When applied to table cells (e.g., th and td ), creates a buffer between their content and the cell borders. |
border | table | Allows you to control the borders of each side of the table and each side of each cell independently using the border properties. |
background-image | table, th, td | Specifies the background image. |
background-color | all | Specifies the background color. |
width | table, th, td | Specifies the width of the table , th , or td . |
height | table, tr, th, td | Specifies the height of the table , th , or td . |
text-align | tr, th, td | Aligns the text. |
vertical-align | tr, th, td | Aligns vertically. |
The following code shows this CSS in use:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
background-color: #f6f6ff;
font-family: Calibri, Myriad;
}
#main {
width: 780px;
padding: 20px;
margin: auto;
}
table.timecard {
margin: auto;
width: 600px;
border-collapse: collapse;
border: 1px solid #fff; /*for older IE*/
border-style: hidden;
}
table.timecard caption {
background-color: #f79646;
color: #fff;
font-size: x-large;
font-weight: bold;
letter-spacing: .3em;
}
table.timecard thead th {
padding: 8px;
background-color: #fde9d9;
font-size: large;
}
table.timecard thead th#thDay {
width: 40%;
}
table.timecard thead th#thRegular, table.timecard thead th#thOvertime, table.timecard thead th#thTotal {
width: 20%;
}
table.timecard th, table.timecard td {
padding: 3px;
border-width: 1px;
border-style: solid;
border-color: #f79646 #ccc;
}
table.timecard td {
text-align: right;
}
table.timecard tbody th {
text-align: left;
font-weight: normal;
}
table.timecard tfoot {
font-weight: bold;
font-size: large;
background-color: #687886;
color: #fff;
}
table.timecard tr.even {
background-color: #fde9d9;
}
</style>
<title>Employee Timecard</title>
</head>
<body>
<div id="main">
<table class="timecard">
<caption>Employee Timecard</caption>
<thead>
<tr>
<th id="thDay">Day</th>
<th id="thRegular">Regular</th>
<th id="thOvertime">Overtime</th>
<th id="thTotal">Total</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<th>Monday</th>
<td>8</td>
<td>0</td>
<td>8</td>
</tr>
<tr class="even">
<th>Tuesday</th>
<td>8</td>
<td>2.5</td>
<td>10.5</td>
</tr>
<tr class="odd">
<th>Wednesday</th>
<td>8</td>
<td>0</td>
<td>8</td>
</tr>
<tr class="even">
<th>Thursday</th>
<td>8</td>
<td>0</td>
<td>8</td>
</tr>
<tr class="odd">
<th>Friday</th>
<td>8</td>
<td>0</td>
<td>8</td>
</tr>
<tr class="even">
<th>Saturday</th>
<td>0</td>
<td>5</td>
<td>5</td>
</tr>
<tr class="odd">
<th>Sunday</th>
<td>0</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total weekly hours:</th>
<td>40</td>
<td>8.5</td>
<td>48.5</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
This code renders the following:
Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS (this article)
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3