Styling tables

CSS Fundamentals: Beginner’s Guide to Web Styling

Sobre a Aula

Hello, everyone! Welcome to the lesson on Styling Tables.

In this lesson, we will learn how to style tables using CSS. We’ll explore how to control the layout, appearance, and behavior of tables.

What is a table?

A table is an HTML element used to organize data into rows and columns. Tables serve various purposes, such as displaying data, like a list of products, or providing structure, like a calendar.

Why style tables?

Well-styled tables are more user-friendly and visually appealing. They can also enhance readability and understanding of the data.

CSS Properties for Tables

Several CSS properties can be used to style tables. Some common CSS properties for tables include:

Border: Defines the table’s border.
Border-collapse: Defines how cell borders in the table should be combined.
Border-spacing: Defines the spacing between cell borders in the table.
Width: Defines the width of the table.
Height: Defines the height of the table.
Background-color: Defines the table’s background color.
Color: Defines the text color in the table.
Font-family: Defines the font family for text in the table.
Font-size: Defines the font size for text in the table.
Font-weight: Defines the font weight for text in the table.
Padding: Defines the space between content and the table border.
Margin: Defines the space between the table and other elements on the page.
Text-align: Defines the text alignment in the table.
Text-decoration: Defines the text decoration in the table.
Table-layout: Defines how the table’s content is laid out.
Caption-side: Defines the position of the table caption.
Column-span: Defines how many columns a cell should span.
Row-span: Defines how many rows a cell should span.
Vertical-align: Defines the vertical alignment of cell content.
Cellpadding: Defines the space between content and cell borders in the table.
Cellspacing: Defines the spacing between cells in the table.

Examples

Let’s look at some examples of using CSS properties to style tables:

Example 1:

The following CSS code sets the table border to black with a radius of 5px:

table {
  border: 1px solid black;
  border-radius: 5px;
}

Example 2:

The following CSS code sets the table’s background color to blue:

table {
  background-color: blue;
}

Example 3:

The following CSS code sets the text color in the table to black with a font size of 16px:

table {
  color: black;
  font-size: 16px;
}

Example for consolidating content

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Styled Table Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <table>
    <caption>Product Table</caption>
    <thead>
      <tr>
        <th>Name</th>
        <th>Price</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Laptop</td>
        <td>$2,000.00</td>
        <td>15.6-inch laptop with Intel Core i5 processor</td>
      </tr>
      <tr>
        <td>Mobile Phone</td>
        <td>$1,000.00</td>
        <td>6.5-inch screen mobile phone with a 12-megapixel camera</td>
      </tr>
      <tr>
        <td>Television</td>
        <td>$3,000.00</td>
        <td>55-inch 4K television</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

CSS

table {
  width: 100%;
  border: 1px solid black;
  border-radius: 5px;
  background-color: white;
}

caption {
  font-size: 1.5em;
  font-weight: bold;
}

thead {
  background-color: #ccc;
}

th {
  text-align: center;
}

td {
  padding: 10px;
}

Code Explanation

The HTML code defines a table with three columns: name, price, and description. The CSS styles the table with the following properties:

Width: The table is set to 100% width to fill the available space.
Border: The table has a 1px solid black border.
Border-radius: The table has a border radius of 5px.
Background Color: The table has a white background color.
Caption: The table caption is styled with a font size of 1.5em and bold font weight.
Thead: The table header has a gray background color.
Th: The cells in the table header are centered.
Td: The table cells have a padding of 10px.

This is just a basic example of styling tables. You can customize the table to meet your specific needs.

Summary

In this lesson, we learned how to style tables using CSS. We explored common CSS properties for tables and saw examples of how to use these properties to style tables.

In the next lesson, we’ll learn how to style navigation menus.

Siga-me

Entrar na conversa