CSS - Tables

What are CSS Tables?

CSS tables style and format tabular data on web pages using Cascading Style Sheets (CSS). They provide a structured way to present information in rows and columns. CSS tables are created using HTML table elements such as <table>, <th>, <tr>, and <td>, then styled with CSS properties to control their appearance and layout.

CSS tables play a role in web design, as they allow developers to create readable and organized data presentations. They are used for displaying tabular information, such as pricing tables, product comparisons, timetables, and more. By applying CSS styles to tables, developers can customize the borders, backgrounds, text alignment, padding, and other visual aspects to match the design of the website.

CSS tables work by targeting the HTML table elements and applying CSS properties to them. The <table> element represents the overall table; <th> elements define the table headers; <tr> elements represent table rows; and <td> elements represent individual table cells. By using CSS selectors, developers can target specific table elements and apply styles like setting background colors or adjusting padding.

To create a basic CSS table:

1. Write the HTML structure with appropriate table elements.
2. Use CSS to style the table components.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

<style>
table {
  width: 100%;
}

th {
  background-color: #f2f2f2;
}

td {
  border: solid black;
}
</style>

You can set width or height of the table, define border styles or colors, control spacing between cells or align text within cells by modifying your code accordingly.

Throughout this tutorial, you will learn various techniques that you can use for styling your tables with ease!

Applying Borders to Tables

To apply borders to a table, use the border property in CSS. The border property lets you set the width, style, and color of the border.

table {
  border: 1px solid black;
}

You can also apply borders to specific table elements like headers (<th>) or cells (<td>):

th {
  border: 2px solid blue;
}

td {
  border: 1px dashed green;
}

Collapsing Table Borders

By default, table borders are separated. Each cell has its own distinct border. You can collapse these borders to remove spacing between cells for a more compact look.

To collapse table borders, use the border-collapse property with the value collapse:

table {
  border-collapse: collapse;
}

Here's an example showing separate and collapsed borders:

<table class="separate">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

<table class="collapsed">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

<style>
.separate { 
  border: 1px solid black; 
}

.collapsed {
  border-collapse: collapse; 
  border: 1px solid black;
}
</style>

Using these properties helps control how your tables look in CSS.

Setting Table Width

To set the width of a table, use the width property in CSS. You can specify the width in pixels (e.g., width: 500px;), percentages (e.g., width: 100%;), or relative units such as em or rem.

table {
  width: 100%;
}

You can also set a fixed width in pixels:

table {
  width: 600px;
}

The width property should be applied to the <table> element itself, not to individual cells (<th> or <td>).

Setting Table Height

To set the height of a table, use the height property in CSS. You can specify the height in pixels (e.g., height: 300px;) or relative units such as em or rem.

table {
  height: 400px;
}

It's generally not recommended to set a fixed height for tables, as content within cells may vary. If content exceeds the specified height, it may overflow or be clipped.

Instead, you can let the table height adjust automatically based on its content by not specifying a height value:

table {
  width: 100%;
}

If you need to set a fixed height for a table, consider the content and use appropriate padding or cell sizing to prevent overflow or clipping.

Apply the height property to <table>, not individual cells (<th> or <td>).

Using these properties helps control your tables' dimensions in CSS. Be mindful of content and choose values that help ensure proper display and readability.

Horizontal Alignment

To align table content horizontally, use the text-align property in CSS. This property can be applied to the <th> and <td> elements to control the alignment of text within the table cells.

The text-align property accepts these values:

• left: Aligns the text to the left side of the cell (default).
• center: Centers the text within the cell.
• right: Aligns the text to the right side of the cell.

th {
  text-align: center;
}

td {
  text-align: right;
}

Table headers (<th>) will have their text centered, while table cells (<td>) will have their text aligned to the right.

You can also apply different alignments to specific cells using class or ID selectors:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td class="left-align">Data 1</td>
    <td class="center-align">Data 2</td>
  </tr>
</table>

<style>
.left-align {
  text-align: left;
}

.center-align {
  text-align: center;
}
</style>

A cell with the class left-align will have its text aligned to the left, while a cell with the class center-align will have its text centered.

Vertical Alignment

To align table content vertically, use the vertical-align property in CSS. This property can be applied to <th> and <td> elements to control vertical positioning of content within table cells.

The vertical-align property accepts these values:

• top: Aligns content at the top of the cell.
• middle: Vertically centers content within the cell.
• bottom: Aligns content at the bottom of the cell.

th {
  vertical-align: top;
}

td {
  vertical-align: middle;
}

Table headers (<th>) will have their content aligned at the top of each cell, while table cells (<td>) will have their content vertically centered.

Similar to horizontal alignment, you can apply different vertical alignments using class or ID selectors:

<table>
  <tr>
    <td class="top-align">Top Aligned Text</td>
    <td class="bottom-align">Bottom Aligned Text</td>
  </tr>
</table>

<style>
.top-align {
  vertical-align: top;
}

.bottom-align {
  vertical-align: bottom;
}
</style>

A cell with the class top-align will have its content aligned to the top, while a cell with the class bottom-align will have its content aligned to the bottom.

Cell Padding

Cell padding adds space within table cells, creating a buffer between the cell content and the cell borders. To control cell padding, use the padding property in CSS. This property can be applied to both <th> and <td> elements.

The padding property accepts values in pixels, percentages, or relative units such as em or rem. You can set padding for all four sides of a cell or specify different values for each side using the padding-top, padding-right, padding-bottom, and padding-left properties.

th, td {
  padding: 10px;
}

You can also set different padding values for each side of a cell:

th {
  padding-top: 15px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

td {
  padding: 8px 12px;
}

Adding padding to table cells helps improve readability by providing visual separation between the cell content and borders.

Cell Spacing

Cell spacing adds space between table cells. To control cell spacing, use the border-spacing property in CSS. This property is applied to the <table> element itself.

The border-spacing property accepts one or two values in pixels, percentages, or relative units. If one value is provided, it sets both horizontal and vertical spacing between cells. If two values are provided, they set horizontal spacing first then vertical spacing.

table {
    border-spacing: 10px;
}

You can also set different values for horizontal and vertical spacing:

table {
    border-spacing: 15px 8px;
}

Note that when using border-spacing, it only takes effect if border-collapse property is set to separate (the default value). If border-collapse is set to collapse, this setting will not work.

Setting Table Background

To set the background color of a table, use the background-color property in CSS. This property can be applied to the <table> element to change the background color of the entire table.

The background-color property accepts color values in various formats, such as named colors (e.g., red, blue), hexadecimal values (e.g., #FF0000, #0000FF), RGB values (e.g., rgb(255, 0, 0), rgb(0, 0, 255)), or HSL values (e.g., hsl(0, 100%, 50%), hsl(240, 100%, 50%)).

table {
  background-color: #f2f2f2;
}

You can also use background images for tables by using the background-image property:

table {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

Setting Cell Background

To set the background color of individual table cells, you can apply the background-color property to <th> and <td> elements.

th {
  background-color: #333;
  color: white;
}

td {
  background-color: #f9f9f9;
}

You can create alternating row colors using CSS selectors:

tr:nth-child(even) {
    background-color: #f2f2f2; 
} 

tr:nth-child(odd) { 
    background-color: #fff; 
} 

Text Color

To change text colors within cells use this:

th {
  color: white;
}

td {
  color: #333;
}

Style headers differently from data cells for better readability:

th {
  font-weight: bold;
  background: #333;
  color: white;
}

td {
  color: #555;
  background: #F5F5F5;
}