CSS: Tables

4 min readJul 5, 2020

Tables are usually used to display tabular data, such as a financial report

But when you create an HTML table without any styles or attributes, browsers disply them without any border. With CSS you can greatly improve the appearance of your tables

CSS provides several properties that allow you to control the layout and presentation of the table elements.

Adding Borders to Tables

The CSS border property is the best way to define the borders for the tables.

The following example will set a black border for the <table> , <th> and <td> elements.

table, th, td {
    border: 1px solid black;
 }

CSS BASIC

CSS Introduction CSS Getting Started CSS Syntax CSS Selectors CSS Color CSS Background CSS Fonts CSS Text CSS Links CSS Lists CSS Tables

CSS BOX MODEL

CSS Box Model CSS Margin CSS Padding CSS Border

CSS ADVANCED

CSS Outline CSS Cursors CSS Overflow CSS Dimension CSS Units CSS Visual Formatting CSS Display CSS Visibility CSS Position CSS Layers CSS Float CSS Alignment CSS Pseudo-classes CSS Pseudo-elements CSS Media Types CSS Sprites CSS Opacity CSS Attribute Selectors CSS Validation

CSS3 FEATURES

CSS3 Border CSS3 Color CSS3 Background CSS3 Gradients CSS3 Text Overflow CSS3 Drop Shadows CSS3 2D Transforms CSS3 3D Transforms CSS3 Transitions CSS3 Animations CSS3 Multi-Column Layouts CSS3 Box Sizing CSS3 Flexbox CSS3 Filters CSS3 Media Queries CSS3 Miscellaneous

CSS3 EXAMPLES

CSS3 Practice Examples CSS3 FAQ’s Answers

CSS3 REFERENCE

CSS3 At-rules CSS3 Properties CSS3 Animatable Properties CSS3 Color Values CSS3 Color Names CSS3 Web Safe Fonts CSS3 Aural Properties More references

CSS Tables

In this tutorial you will learn how to style HTML tables with CSS.

Styling Tables with CSS

Tables are typically used to display tabular data, such as financial reports.

But when you create an HTML table without any styles or attributes, browsers display them without any border. With CSS you can greatly improve the appearance your tables.

CSS provides several properties that allow you to control the layout and presentation of the table elements. In the following section you will see how to use CSS to create elegant and consistent tables.

Adding Borders to Tables

The CSS border property is the best way to define the borders for the tables.

The following example will set a black border for the <table>, <th>, and <td> elements.

Example

Try this code »

table, th, td {
    border: 1px solid black;
}

By default, browser draws a border around the table, as well as around all the cells, with some space in-between, which results in double border. To get rid of this double border problem you can simply collapse the adjoining table cell borders and create clean single line borders.

Collapsing Table Borders

There are two distinct models for setting borders on table sells in CSS: seperate and collapse

Seperate is the default an each cell has its own distinct border whereas collapsed border model, adjacent tables share a common border

table {
    border-collapse: collapse
 )th, td{
     border: 2px solid black
  }

Adjust Space inside Tables

By default, the browser creates the table cells just large enough to contain the data in cells

To add more space between the table cell contents and the cell borders, you can simply use the CSS padding property.

th, td{
   padding: 15px
  }

You can also adjust the spacing between the borders of cells using CSS border-spacing property, if the borders of your table are separated(which is default

table {
    border-spacing: 10px
 }

Setting Table Width and Height

By default a table will render just wide enough to contain all its contents

However you can adjust its width and height

table {
     width: 100%
  }
th {
     height: 40px
  }

Controlling the Table Layout

A table expands and contracts to accomodate the data contained inside it. This is its default behavior. As data fills the table it continues to expand as long as there is space. However to manage layout one must set a fixed width.

This can be done with the CSS table-layout property. This property defines the algorithm to be used to layout the table cells, rows and columsn. This property take one of two values.

auto — Uses an automatic table layout algorithm. With this algorithm, the widths of the tables and its cells are adjusted to fit the content. This is the default value
fixed — Uses the fixed table layour algorithm. With this algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table’s width, the width of the columns, and borders or cell spacing.It is normally faster than auto.

table {
    width: 300px 
    table-layout: fixed;
}

Aligning Text Inside Table Cells

You can align text content inside the table either horizontally or vertically

Horizontal Alignment of Cell Contents

For horizontal alignment of text inside the table cells you an use the text-align property in the same way as you use with other elements. You align text to either left, right, center or justify

Vertical Alignment of Cell Contents

Similarly you can do the same vertically and align elements to the top, bottom or middle using the CSS vertical-align property

Controlling position of the caption

You can set the vertical position of a table caption using the CSS caption-side property. This can be placed either top or bottom

You can change the horizontal alignment(left or right) using the text-align property

Handling Empty Cells

You use the empty-cells property to either show or hide empty cells

Creating Zebra-striped Tables

Setting different background colors for alternate rows is a popular technique to improve the readability of tables that has a large amount of data. This is commonly known as zebra-striping a table

You can simply achieve this effect by using the CSS :nth-child() pseudo-class selector

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

Making a Table Responsive

Tables are not responsive in nature. However, to support mobile dvies you can add responsiveness to your tables by enabling horizontal scrolling on small screens. To do this simply wrap your table with a <div> element and apply the style overflow-x:auto

<div style="overflow-x: auto">
    <table>
           ...table content...
    </table>
</div>

CSS: Tables

Adding Borders to Tables

CSS Tables

Styling Tables with CSS

Adding Borders to Tables

Example

Collapsing Table Borders

Adjust Space inside Tables

Setting Table Width and Height

Controlling the Table Layout

Aligning Text Inside Table Cells

Horizontal Alignment of Cell Contents

Vertical Alignment of Cell Contents

Controlling position of the caption

Handling Empty Cells

Creating Zebra-striped Tables

Making a Table Responsive

Written by Kudzanayi Dzvairo