CSS - Tables

Welcome, aspiring web developers! Today, we're diving into the world of CSS tables. As your friendly neighborhood computer science teacher, I'm excited to guide you through this journey. Tables might seem old-school, but trust me, they're still incredibly useful in modern web design. So, let's roll up our sleeves and get started!

CSS Tables - Border Collapse

Imagine you're building a fence around your yard. You want the fence posts to touch each other, right? That's exactly what border-collapse does for table borders. It determines whether cell borders should be separated or collapsed into a single border.

table {
  border-collapse: collapse;
}

This code will make your table borders touch each other, creating a clean, unified look. It's like giving your table a neat haircut!

CSS Tables - Border Spacing

Now, what if you want some space between your table cells? That's where border-spacing comes in handy. It's like social distancing for your table cells!

table {
  border-spacing: 5px;
}

This will add a 5-pixel gap between your cells. You can even set different horizontal and vertical spacing:

table {
  border-spacing: 5px 10px;
}

Here, we have 5 pixels of horizontal spacing and 10 pixels of vertical spacing. It's like giving your table cells some personal space!

CSS Tables - Caption Side

Tables can have captions, and you can control where these captions appear using caption-side. It's like deciding whether to put the title of a book on the top or bottom of the cover.

caption {
  caption-side: bottom;
}

This will place your table caption at the bottom. You can also use top if you prefer it up there.

CSS Tables - Empty Cells

Ever wondered what happens to empty cells in your table? The empty-cells property lets you decide whether to show or hide them.

table {
  empty-cells: hide;
}

This will make empty cells invisible. It's like playing hide-and-seek with your table cells!

CSS Tables - Table Layout

The table-layout property determines how a table's cells, rows, and columns are laid out. It's like choosing between a strict seating chart and a free-for-all at a dinner party.

table {
  table-layout: fixed;
}

This sets a fixed table layout, which can improve rendering speed for large tables.

CSS Table - with fixed Layout

With a fixed layout, the table's width is determined by the first row or specified widths. It's like having assigned seats at a wedding reception.

table {
  table-layout: fixed;
  width: 100%;
}

th, td {
  width: 25%;
}

This creates a table with four equal-width columns, regardless of content.

CSS Table - with auto Layout

An auto layout adjusts column widths based on their content. It's like letting guests choose their own seats at a casual dinner party.

table {
  table-layout: auto;
  width: 100%;
}

Here, the browser will adjust column widths based on their content.

CSS Tables - Height and Width

You can control the size of your table and its cells using height and width properties. It's like deciding how big your dining table should be.

table {
  width: 100%;
}

td {
  height: 50px;
}

This sets the table width to 100% of its container and each cell height to 50 pixels.

CSS Tables - Table Alignment

Aligning content within table cells is crucial for readability. It's like arranging food on a plate - presentation matters!

td {
  text-align: center;
  vertical-align: middle;
}

This centers the content both horizontally and vertically within each cell.

CSS Tables - Border

Borders can make your table more visually appealing and easier to read. It's like drawing lines on a piece of paper to organize information.

table, th, td {
  border: 1px solid black;
}

This adds a 1-pixel solid black border to the table and all its cells.

CSS Tables - Background color

Adding background colors can make your table more visually appealing and help distinguish different parts of the table. It's like painting rooms in your house different colors.

table {
  background-color: #f2f2f2;
}

th {
  background-color: #4CAF50;
  color: white;
}

This sets a light gray background for the table and a green background with white text for the header cells.

CSS Tables - Font styles

Styling the text in your table can greatly improve readability. It's like choosing the right font for a book - it can make all the difference in the reading experience.

table {
  font-family: Arial, sans-serif;
}

th {
  font-weight: bold;
}

td {
  font-size: 14px;
}

This sets Arial as the font for the entire table, makes the header text bold, and sets the cell text size to 14 pixels.

CSS Tables - Other Styles

There are many other styles you can apply to tables. Here's a quick rundown:

Property	Description	Example
padding	Space inside cells	td { padding: 10px; }
border-radius	Rounded corners	table { border-radius: 5px; }
box-shadow	Shadow effect	table { box-shadow: 2px 2px 5px grey; }
opacity	Transparency	table { opacity: 0.8; }

CSS Tables - Margin

Margins can give your table some breathing room from other elements on the page. It's like leaving some space around a picture frame on a wall.

table {
  margin: 20px auto;
}

This adds a 20-pixel margin to the top and bottom of the table, and centers it horizontally.

CSS Tables - Table Dividers (vertical / horizontal)

You can add dividers to your table to separate columns or rows. It's like using a ruler to draw straight lines in a notebook.

td, th {
  border-right: 1px solid black;
}

tr {
  border-bottom: 1px solid black;
}

This adds vertical lines between columns and horizontal lines between rows.

CSS Tables - Striped Table

Striped tables can make it easier to read rows of data. It's like highlighting every other line in a book to keep your place.

tr:nth-child(even) {
  background-color: #f2f2f2;
}

This creates alternating white and light gray rows in your table.

CSS Tables - Responsive Table

Making tables responsive ensures they look good on all devices. It's like having a dining table that can expand or contract based on the number of guests.

@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr { border: 1px solid #ccc; }

  td {
    border: none;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    content: attr(data-label);
  }
}

This code transforms the table into a list-like format on small screens, making it easier to read on mobile devices.

CSS Table - Related Properties

Here's a table of related CSS properties you might find useful when working with tables:

Property	Description
border-collapse	Determines whether cell borders are separate or collapsed
border-spacing	Sets the distance between cell borders
caption-side	Specifies the placement of a table caption
empty-cells	Sets whether to display borders on empty cells
table-layout	Sets the algorithm used to lay out table cells, rows, and columns
vertical-align	Sets the vertical alignment of content in a cell
text-align	Sets the horizontal alignment of content in a cell

And there you have it! You're now well-equipped to create and style tables in CSS. Remember, practice makes perfect, so don't be afraid to experiment with these properties. Happy coding!

Credits: Image by storyset