CSS Beginner’s Tutorial – Basic Tables

INTRODUCTION
TABLE COSMETICS

Welcome to a beginner’s tutorial on CSS Tables. By now, you should know the CSS box model works (shall leave a link in the extras section below if you have missed it out). But just how does the box model apply to a table? Does it even work at all? That is what we will walk through in this guide – Read on to find out, and get some tips on styling HTML tables!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

 

EXTRA
SOURCE CODE DOWNLOAD

First, here is the download link to the example source code as promised.

 

SOURCE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

INFOGRAPHIC

Basic CSS Table (Click to Enlarge)

 

SECTION A
THE BASICS

First, let us start with how to do some basic styling on HTML tables.

 

QUICK RECAP – THE BOX MODEL

Nearly all the HTML elements are rendered around what is called the box model, and it is like an onion skin with 4 layers:

  • In the center are the contents.
  • That is surrounded by the padding.
  • Then by a possible layer of border.
  • Finally, margin on the outside.

 

 

TABLES ADIBE TO THE BOX MODEL

Tables may be “different from the rest”, but to lessen the confusion on styling tables – Yes, it still conforms to the box model.

1-table-box-model.html
<table style="background:#93ff99; border:5px solid #93bcff; padding:30px; margin:10px;">
  <tr>
    <td style="background:#f9a69d">Cell</td>
    <td style="background:#f9a69d">Cell</td>
  </tr>
</table>
Cell Cell

Just treat the rows and cells as a single “block of contents” and apply the box model “as usual”. But please take note that individual cells in the table are also boxes on their own; A table is essentially a box of boxes, which we will slowly walk through below.

 

STYLING THE CELLS

First, let us start from the “internal table cells” and the styling basics.

TEXT ALIGNMENT

2a-text-align.html
<table>
  <tr>
    <td style="text-align:left;">Left</td>
    <td style="text-align:right;">Right</td>
  </tr>
  <tr>
    <td style="text-align:center;">Center</td>
    <td style="text-align:justify;">Justify</td>
  </tr>
</table>
Left Right
Center Justify

This one should be captain obvious, we can set the text alignment within the table cells.

CELL VERTICAL ALIGNMENT

2b-vertical-align.html
<table>
  <tr>
    <td style="vertical-align:baseline; height:80px;">BASELINE</td>
    <td style="vertical-align:top;">TOP</td>
    <td style="vertical-align:middle;">MIDDLE</td>
    <td style="vertical-align:bottom;">BOTTOM</td>
  </tr>
</table>
BASELINE TOP MIDDLE BOTTOM

Not a surprise as well, we can adjust the vertical alignment of the text in each cell as well.

 

 

CELL WIDTH & HEIGHT

2c-cell-width-height.html
<table style="width:auto;">
  <tr>
    <td style="background:#f9a69d; width:200px; height:80px;">One</td>
    <td style="background:#86f442; width:100px;">Two</td>
  </tr>
</table>
One Two

Yes, we can adjust the width and height of each individual cell. But please do take note that cells within the same row will take the highest height within the same row.

TABLE & CELL POSITIONING

2d-cell-position.html
<table style="position:relative;">
  <tr>
    <td style="position:relative; bottom:10px; background:#f4b942">Positioned Cell.</td>
    <td>Normal Cell.</td&gt;
  </tr>
</table>
Positioned Cell. Normal Cell.

This one is probably weird as heck. We can also position the cells in the table… Not sure how useful this is, but just know that it works.

 

TABLE & CELL PADDING

3-padding.html
<table style="padding:20px; background:#ffebe8;">
  <thead style="padding:200px;">
    <tr style="padding:200px;">
      <td style="padding:20px; background:#deffba;">20px padding.</td>
      <td style="padding:40px; background:#bae8ff;">40px padding.</td>
    </tr>
  </thead>
  <tbody style="padding:200px;">
    <tr>
      <td style="background:#deffba;">Cell.</td>
      <td style="background:#bae8ff;">Cell.</td>
    </tr>
  </tbody>
  <tfoot style="padding:200px;">
    <tr>
      <td style="background:#deffba;">Cell.</td>
      <td style="background:#bae8ff;">Cell.</td>
    </tr>
  </tfoot>
</table>
20px padding. 40px padding.
Cell. Cell. 
Cell. Cell.

The padding can be applied to many different places within the table itself. But as you can see, it acts differently depending on where it is being applied:

  • When added to the table, the padding wraps around the cells.
  • When applied to the cells, it will wrap around the contents of the cell.
  • But please take note – All the cells within the same row will follow the cell with the most padding.
  • Lastly, padding has no effect on the table rows, header, body, and footer.

 

 

TABLE BORDERS

Table borders are kind of a major bugbear for beginners. There are a few ways to work with the borders and let’s walk through them in this part.

BASIC BORDERS

4a-basic-border.html
<table style="border:10px solid #ab281f;">
  <thead style="border:10px solid #000">
    <tr>
      <td style="border: 5px solid #deffba; padding:10px;">Cell.</td>
      <td style="border: 20px solid #232cad; padding:10px;">Cell.</td>
    </tr>
  </thead>
  <tbody style="border:10px solid #000">
    <tr>
      <td>Cell.</td>
      <td>Cell.</td>
    </tr>
  </tbody>
  <tfoot style="border:10px solid #000">
    <tr>
      <td>Cell.</td>
      <td>Cell.</td>
    </tr>
  </tfoot>
</table>
Cell. Cell.
Cell. Cell.
Cell. Cell.

The border acts pretty much just like the padding:

  • When applied on the table itself, the border wraps outside the table.
  • When applied to the cells, it will wrap around the cell contents.
  • But take note – Unlike padding, we can have different border colors and sizes for each of the individual cells.
  • Finally, border also has no effect on rows, table headers, body, and footer.

BORDER SPACING

4b-border-spacing.html
<table style="border-spacing:10px">
  <tr>
    <td style="border: 5px solid #f00">Cell.</td>
    <td style="border: 5px solid #0f0">Cell.</td>
  </tr>
  <tr>
    <td style="border: 5px solid #00f">Cell.</td>
    <td style="border: 5px solid #000">Cell.</td>
  </tr>
</table>

The border-spacing property is applied to the table, and it is used to space out the cells. Take note – margin has no effect on the cells.

BORDER COLLAPSE

4c-border-collapse.html
<table style="border-collapse:separate">
  <tr>
    <td style="border: 5px solid #f00">Cell.</td>
    <td style="border: 5px solid #0f0">Cell.</td>
  </tr>
</table>

<table style="border-collapse:collapse">
  <tr>
    <td style="border: 5px solid #00f">Cell.</td>
    <td style="border: 5px solid #000">Cell.</td>
  </tr>
</table>
Cell. Cell.
Cell. Cell.

By default, table cells will separate from each other. To “combine” the cells and “get rid” of the “internal margins”, we can use border-collapse:collapse on the table.

 

 

SECTION B
TABLE STYLING TIPS

That’s it for the basics, and here are some common styling tips for tables.

 

ZEBRA/STRIPE TABLE

This is a small extra for you folks who want to quickly zebra stripe your table.

5a-zebra-table.html
<style>
  tr:nth-of-type(odd){ background: #f7d776 }
  tr:nth-of-type(even){ background: #c9d5ea }
</style>
<table>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
</table>
Row
Row
Row
Row
Row
Row

 

COLUMN ZEBRA/STRIPE

It also works in a similar way for columns.

5b-column-zebra.html
<style>
  td:nth-of-type(odd){ background: #f7d776 }
</style>
<table>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>
Cell Cell Cell Cell Cell

 

HIGHLIGHT ON HOVER

One last small extra – Highlighting a table row when the mouse hovers over it.

5c-hover-highlight.html
<style>
tr:hover{ background:#f7d776 }
</style>
<table>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
</table>
Row
Row
Row
Row
Row
Row

 

 

EXTRA
USEFUL BITS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

SUMMARY

Property Applicable To Notes
text-align Table Cell Sets the horizontal alignment of the text. Possible values – left right center justify
vertical-align Table Cell Sets the vertical alignment of the text. Possible values – top middle bottom baseline
width Table and cells Sets the width of the entire table or individual cell.
height Table and cells Sets the height of the entire table or individual cell.
background Table, cells, table header, body, footer. Sets the background color of the specified part of the table.
padding Table and cells Sets the padding. No effect on rows, head, body, and foot.
border Table and cells Sets the border. No effect on rows, head, body, and foot.
border-spacing Table Sets the “margin” around the cells.
border-collapse Table By default, this is separate, which adds a “margin” around the cells. Set it to collapse to remove the “margin”.

 

LINKS & REFERENCES

 

CLOSING
WHAT’S NEXT?

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *