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