University of Computer Studies
Cascading Style Sheets (CSS)
University of Computer Studies
Table Styles with CSS
HTML Group
Department of Information Technology
Supporting and Maintenance
CSS Table Size
Table Width and Height
The width and height of a table are defined by the width and height properties.
Example:
table {
width: 100%;
}
th {
height: 60px;
}
CSS Table Alignment
Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.
By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
Example:
th {
text-align: left;
}
td {
text-align: center;
}
CSS Table Alignment
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.
By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).
Example:
td {
height: 50px;
vertical-align: bottom;
}
Table Padding
To control the space between the border and the content in a table, use the padding property on <td> and <th>
elements.
Example:
th, td {
padding: 15px;
text-align: left;
}
Horizontal Dividers
The border-bottom property to <th> and <td> for horizontal dividers.
Example:
th, td {
border-bottom: 1px solid #ddd;
}
Hoverable Table
:hover selector on <tr> to highlight table rows on mouse over.
Example:
<style>
table { width: 50%; }
th, td { padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {background-color: coral;}
</style>
Striped Tables
zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows.
Example:
<style>
table { width: 50%; }
th, td { padding: 8px;
text-align: left;
}
tr:nth-child(even) {background-color: #fcc9eb;}
tr:nth-child(odd) {background-color: #e6129f;}
</style>
Table Color
To specifies the background color and text color of <th> elements.
Example:
<style>
table { width: 50%; }
th, td { padding: 8px;
text-align: left;
}
th {background-color: #aa046a;
color: white;
}
tr:nth-child(even) {background-color: #fcc9eb;}
</style>
CSS Table Properties
border-collapse Property
Specifies whether or not table borders should be collapsed.
Example:
<style>
table, td, th {
border: 1px solid black;
}
#table1 {
border-collapse: separate;
}
#table2 {
border-collapse: collapse;
}
</style>
border-spacing Property
The border-spacing property sets the distance between the borders of adjacent cells.
This property works only when border-collapse is separate.
Example:
<style>
table, td, th {border: 1px solid black;}
#table1 {border-collapse: separate;
border-spacing: 5px;
}
#table2 {border-collapse: separate;
border-spacing: 8px;}
</style>
Caption and caption-side Properties
The <caption> contains the name or description of the table.
The caption-side property specifies the placement of a table caption. caption-side: top| bottom| initial| inherit;
Example:
<style>
caption {
padding: 20px;
font-style: italic;
caption-side: bottom;
color: rgb(35, 37, 34);
text-align: center;
letter-spacing: 1px;
}
</style>
empty-cells Property
The empty-cells property sets whether or not to display borders on empty cells in a table.
This property has no effect if border-collapse is "collapse".
Example:
<style>
table.ex1 {
empty-cells: hide;
}
table.ex2 {
empty-cells: show;
}
</style>
table-layout Property
The table-layout property defines the algorithm used to layout table cells, rows, and columns.
Example:
<style>
table { border-collapse: collapse;
border: 1px solid black;
}
th,td { border: 1px solid black; }
table.st1 { table-layout: auto;
width: 50%;
}
table.st2 { table-layout: fixed;
width: 50%; }
</style>
CSS Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.
Add a container element (like <div>) with overflow: scroll (or) overflow-x:auto around the <table> element to make it
responsive.
Example:
<body>
<div style="overflow:scroll;">
<table>
... table content ...
</table>
</div>
</body>
CSS Responsive Table
<body>
<style> <div class= "container">
<table>
.container{ overflow: scroll; <tr>
width: 500px; <th>First Name</th>
<th>Last Name</th>
height: 150px;} <th>Points</th>
…….
table{ </tr>
border: 1px solid black; <tr>
<td>Jill</td>
border-collapse: collapse; <td>Smith</td>
<td>50</td>
padding: 5px; …….
background-color: rgb(230, 97, 119);} </tr>
<tr>
th,td { border: 1px solid black; <td>Eve</td>
<td>Jackson</td>
padding: 5px;} <td>94</td>
…….
th{ background-color: rgb(173, 18, 44);}
</tr>
</style> </table>
</div>
</body>
Hand-On Practice
You will use the table properties such as width, border, strip table, hover and caption properties in this Exercise-
10. Display the web page in a browser. It should look similar to following figure.
Hand-On Practice
Use to create a table with a similar style as the following table. Save it as exercise11.html.
References
Terry Felke-Morris, “Web Development and Design
Foundations with HTML5”, 6th Edition.
Jon Duckett, “Beginning HTML, XHTML, CSS, and
JavaScript”.
University of Computer Studies
