Search⌘ K
AI Features
Home
Courses
Web Development: Unraveling HTML, CSS, and JavaScript

Defining Styles for Tables

Explore how to apply CSS styles to HTML tables to achieve more modern and visually appealing layouts. Understand the transition from deprecated HTML table attributes to CSS styling, learn to style table borders, backgrounds, and rows, and use <colgroup> and <col> tags for column-specific styles. This lesson helps you create accessible and attractive tables using appropriate CSS techniques.

We'll cover the following...
widget

HTML markups prior to HTML5 defined dozens of attributes for table-related tags that were responsible for setting up the visual properties of tabular data.

For example, the <table> tag had attributes, such as align, bgcolor (background color), cellpadding (space between the cell wall and the cell content), cellspacing (space between cells), summary, and width to let designers style the visual appearance. Other tags had their own styling attributes, too.

HTML5 got rid of these attributes and allows setting up table appearance only through styles. So, when you need to apply table styles, use CSS style sheets. Let’s assume, you would like to add styles to the table defined in Exercise: Extra headers semantic and scope attributes of <th> so that it is rendered as shown in the image below:

One possible solution is the set of style rules in this code snippet:

NAME_
CSS
<style>
  body {
    font-family: Tahoma, Arial, sans-serif;
  }
  table {
    background-color: aliceblue;
    border: 4px solid dimgray;
    border-collapse: collapse;
  }
  td, th {
    padding: 4px 8px;
    text-align: center;
    border: 2px solid dimgray;
  }
  th {
    font-weight: normal;
    background-color: cornflowerblue;
    color: white;
  }
  td {
    color: dimgray;
    font-weight: bold;
  }
  .origin {
    background-color: navy;
    color: lightgoldenrodyellow
  }
</style>

Without going into details about CSS, here are a few things to understand how ...