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