Table skeleton

Learn basic styles for table, tr, td.

Basic styling for a table

A data table shows information in rows and columns. In HTML it is built with table, tr, td and th tags. When you style a table in CSS, you first set up the skeleton: borders, padding and cell spacing.

Once the skeleton is solid, decorations like color, hover and zebra stripes are easy to add. That is why table styling starts with the basic setup.

Cell padding

Cell padding is the space between a cell's edge and its content. HTML's cellpadding attribute is outdated; today you write padding on the td and th selectors in CSS.

Example: td { padding: 12px; }. This space keeps text from sticking to the cell edge; the table looks readable. Using the same value on every cell gives a consistent look.

Border-collapse basics

By default, table cell borders are drawn separately; a double line appears between two cells. The border-collapse: collapse declaration merges those lines into one.

This declaration goes on the table selector. The result: a cleaner, more modern look. Most professional tables use this value.

Exercise Add basic styles to a price list table

For a table with class .fiyatlar, write these styles: add border-collapse: collapse; to the .fiyatlar selector; add padding: 12px; and border: 1px solid #ddd; to the .fiyatlar td, .fiyatlar th selector.

Show example solution

open a .fiyatlar selector and write border-collapse: collapse; inside. Then open a .fiyatlar td, .fiyatlar th selector and write padding: 12px; and border: 1px solid #ddd; inside.
Example solution:
.fiyatlar {
  border-collapse: collapse;
}
.fiyatlar td, .fiyatlar th {
  padding: 12px;
  border: 1px solid #ddd;
}

Test yourself

Where do you define cell padding?
```
/* write padding on the ? selector */
```
- On the td and th selectors
- On the table selector
- On the tr selector
- On the caption selector
Show answer

On the td and th selectors — Correct! Cell padding is written with padding on the td and th selectors.

Write the property for cell padding

td, th {
  ____: 12px;
  border: 1px solid #ddd;
}

Show answer

td, th {
  padding: 12px;
  border: 1px solid #ddd;
}

Match the table terms

table

table element
tr

row
td

data cell
th

header cell

Next lesson: Border-collapse

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies