CIS195 Web Authoring 1: HTML

Styling Tables with CSS

Weeks 1-5	Weeks 6-11
1. Intro to HTML	6. Layout with CSS
2. More HTML, file paths	7. CSS Grid and Flexbox
3. Site structure and navigation	8. HTML Forms
4. Formatting with CSS	9. Multimedia
5. Midterm, Project Propposal	10. Tables, Project Completion
	11. Final

[Topics by Week for the Ten-Week Term]

[TOC]

Q and A

• Any questions on labs or the term project?
• Review due dates on Canvas.

Introduction

Review

• Overall table structure
• Borders
• Row and column spans
• Captions

Styling Tables

• Styling using HTML elements is deprecated.

• Styling should be done with CSS.

##Structural Elements for Tables

These semantic-structural elements provide organization to your code and give you targets for CSS rules

• thead—table heading

• tbody—table body

• tfoot—table footer

  Example:

  <table>
    <thead>
      <tr>
        <th>One</th>
        <th>Two</th>
      </tr>
    </thead> 
    <tbody>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
      </tr>
      <tr>
        <td>Another one</td>
        <td>Three more</td>
      </tr>
      </tbody>
      <tfoot>
      <tr>
        <td>Two things</td>
        <td>$Four things</td>
      </tr>
    </tfoot>
  </table>
  

• colgroup—column group This one is special! There are no real columns in an HTML table, so this is a way to select a group td elements that make up a column so that you can apply a CSS rule to them.

  • Even if you are only styling the first column, you need to include as many <col> elements are there are <td> or <th> elements in whichever row of your table has the most.

  Example:

  <table>
    <colgroup>
      <col class="specialColumn">
      <col style="background-color:blue;">
      <col id="col3">
    </colgroup>
    <tr>
      <th>First column</th>
      <th>Second column</th>
      <th>Third Column</th>
    </tr>
    <!-- the rest of the table goes here -->
  </table>
  

• You can only apply the following CSS properties to a colgroup:

  • width
  • visibility
  • background properties
  • border properties

CSS Table Properties

The best practice is to format tables with CSS rather than with HTML attributes.

• border-collapse :

  • collapse—collpses the border into a single line.
  • separate—the default, separate borders around each td.

• The rest of the properties are the general properties you would use for other block elements.

  • border—use it like you would on any block element.
  • margin and padding
  • width and height
  • text-align
  • vertical-align
  • and more!

• Example:

  table {
            border-collapse: collapse;
            border: 4px solid darkgreen;
            text-align: center;
        }
    
  table td {
              border: 2px dotted green;
              border-collapse: collapse;
          }
  

  Note: the border property is the combined “short-hand” property for setting multiple border properties.

##Examples

• Table styling example—one table sytled with HTML attributes, another styled with CSS.

• Code for in-class demo—on GitHub.

• Nested tables:

  • Basic nested tables
  • Nested tables with colspan
  • Nested tables with column and row headers
  • Nested tables with column headers

##References

• W3Schools: CSS Table Formatting
• MDN Tutorial: Styling Tables

---

These Web Authoring lecture notes by Brian Bird, 2018, revised 2023, are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

---

This site is open source. Improve this page.