HTML tables are the backbone of structured data on the web. They aren’t just for spreadsheets anymore. You can shape them, color them, and control exactly how they breathe within a browser window. The old-school method relies on specific presentation attributes. They work. They are direct. You don’t need complex CSS frameworks to get a decent-looking layout.
Changing the Table Background Color
Start with the big picture. Want the whole grid to pop? You don’t need a separate stylesheet. Just slap a bgcolor attribute on the opening
tag.
Example:
This sets the stage. Every cell inherits that vibe unless you override it.
You can also zoom in. Color a single row or just one specific cell. Drop bgcolor="color" into either the
or
| tag.
Example:
|
It is a small detail. But it changes how the eye moves across the data.
Table Size
Browsers are lazy by default. They expand rows and columns to fit the content. If your data is short, the table stretches to fill the window. If it is long, it gets long.
Sometimes you want control. You want fixed dimensions.
Add width and height to the starting
tag. You can use pixels or percentages.
Example:
Pixels give you hard limits. Percentages let the table breathe with the viewport. Which one you pick depends on your design goals.
You can also lock down individual cells. Add width="value" to a
or
| tag. This overrides the global setting for that specific spot.
Experiment. Try a pixel value. Then try a percentage. See how it breaks or holds together in different screens.
Cellpadding
Space is design. Specifically, the space between the edge of a cell and the text inside it.
This is cellpadding. It takes a pixel value.
Use it in the starting
tag.
Example 1:
Example 2:
Five pixels is tight. Fifteen is airy. The content feels different. It looks cleaner with more padding.
Cellspacing
Then there is the gap between cells.
This is cellspacing. It also takes a pixel value.
Add it to the
tag.
Example 1:
Example 2:
A small cellspacing makes the grid feel dense. A large one makes it look like a checklist.
Table Headings
Data needs structure. Headers provide that.
To make a column or row stand out as a heading, swap
for
| in the first row.
It automatically bolds the text. It centers it too.
Example:
| | |
