Styling Tables

Master the art of data presentation

With CSS, your tables can be not just functional but downright dazzling. Colors and backgrounds make them shine, while borders and outlines add just the right touch of elegance. After all, even a table deserves to indulge in a bit of grandeur!

Choosing the right fonts and alignments ensures your data isn’t just readable—it’s the star of the show.

Use color highlights and varying font sizes to create a subtle hierarchy, placing key information on the throne it deserves. And don’t forget: your table should shine on any device, whether it’s a massive monitor or the tiniest smartphone.

Let’s Keep Going

Table Magic

Table Magic

CSS Sorcery and Other Mysteries

With CSS, you can enchant your tables with custom borders. The border property lets you control thickness, color, and line style to suit your design whims. Prefer a cleaner look? The border-collapse property ensures no gaps between cells, keeping things tidy.

td {
    border: 1px solid grey;
    padding: 10px;
    text-align: center;
    vertical-align: bottom;
}

th:hover {
    background-color: red;
}

In this table, the entire width of the screen is filled. Borders collapse neatly, cells have padding, and text is aligned just right. On hover, th headers glow red, adding a fiery flair.

More Magical Table Properties:

text-align: center: Aligns text neatly in the middle of the cells—like letters sitting up straight and paying attention.
vertical-align: bottom: Drops content to the bottom of the cells for a more relaxed, casual vibe.

background-color: Adds a splash of color to your table cells, creating visual highlights.
hover: Changes cell backgrounds when the mouse hovers over them, offering interactive feedback—as if the cells are waving hello!

In this lesson, you have learned…

How to use border and border-collapse to influence your table’s appearance and create clean, clear structures.
Why padding inside table cells is important to make content more visually pleasant and easier to read.
How to use text-align and vertical-align to precisely align text within your table cells.
What background-color and hover effects are good for, making your table more interactive and visually appealing.
How to style <th> and <td> differently with CSS to create distinct visual effects for headers and content cells.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Cursed Recipe

In an abandoned alchemist’s lab, where cobwebs rule the roost, lies an old recipe that looks like it was penned by a drunk troll. But fear not—with CSS, you’ll bring order to the chaos! Transform the table into a work of art: let the text shine, make the ingredients shimmer with magic, and let the instructions radiate elegance. Who knows? You might not just craft a recipe but also conjure a smile on the face of the next alchemist!

Your Task: Create a Stunning Table

Set Width and Borders: Make the table 100% wide. Use border-collapse to merge the table’s borders for a sleek appearance.
Adjust Background and Text Colors: Add a background color and text color to the header (<thead>). Apply background colors to the rows in the main section (<tbody>).
Create a Hover Effect: Add a hover effect for <tbody> rows so they highlight when the mouse hovers over them.
Use a Font Family: Set the font for the entire table to Arial to give it a clean, professional look.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

/* body */
body {
    font-family: Arial, Helvetica, sans-serif;
}

/* Basic Table Structure */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Arial', sans-serif;
}

/* Table Borders */
th,
td {
    border: 2px solid forestgreen;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}

/* Background and Text Colors */
thead {
    background-color: darkgreen;
    color: white;
}

tbody tr {
    background-color: lightgreen;
}

tfoot {
    background-color: forestgreen;
    color: white;
}

/* Hover Effect */
tbody tr:hover {
    background-color: yellowgreen;
    color: black;
}

Let’s Keep Going