CSS Beginner’s Tutorial – Basic Tables

 

 

 

 

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

 

 

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.

<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>

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

<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>

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

CELL VERTICAL ALIGNMENT

<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>

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

 

 

CELL WIDTH & HEIGHT

<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>

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

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

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

<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>

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

<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>

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

<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

<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>

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.

 

 

 

ZEBRA/STRIPE TABLE

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

<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>

 

COLUMN ZEBRA/STRIPE

It also works in a similar way for columns.

<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>

 

HIGHLIGHT ON HOVER

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

<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>

 

 

 

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

• Styling Tables – MDN
• How to Style a Table With CSS – Webucator
• CSS Box Model