HTML Table Borders

A bare table is readable; borders make the grid obvious at a glance. The previous lesson locked structure with table, tr, th, and td. This session adds the look: in modern HTML you draw borders with CSS, not only the old presentational border attribute on <table>. Structure stays in HTML; lines, spacing, and color belong to style rules. Think of borders as glasses for the grid — they help eyes track cells without changing what the data means.

Why CSS instead of the old attribute

Browsers once accepted <table border="1"> as a quick teaching trick. That attribute is obsolete for serious modern pages and gives you almost no control over color, thickness, or which sides appear. CSS lets you set width, style, and color independently, share one rule across many cells, and combine borders with padding and border-collapse. Learning borders through CSS also matches how you will style headings, lists, and layout later, so practice pages stay consistent with real projects.

Direct answer

Style table, th, and td with the CSS border property. Use border-collapse: collapse on the table so adjacent cell borders merge into a single clean grid line instead of a thick double edge. Put rules in a style attribute for tiny demos, or — better for reuse — in a <style> block or stylesheet with a class. Keep tr/th/td markup semantic; only the appearance moves to CSS. If a tutorial still leads with border="1" and nothing else, treat it as a museum note and translate the idea into CSS.

CSS borders versus obsolete markup

Borders on cells (inline practice)

Inline styles are fine while you experiment on one small table. Collapse first, then give every header and data cell a thin solid border and a little padding.

Reading the inline sample

• border-collapse: collapse on the table merges neighboring borders into one grid
• Each th/td sets border: 1px solid #333 for a simple dark line
• padding: 6px keeps text from touching the border
• Inline styles repeat on every cell — useful for learning, noisy for large tables
• The HTML structure is unchanged from the Tables lesson; only presentation was added
• If lines still look doubled, confirm collapse is on the table element, not only on a single cell

Shared look with a style block

When several cells should match, one class rule beats copying the same inline string everywhere. A small <style> block in the document head is a clear bridge toward external stylesheets you will use in fuller CSS courses. Classes also let you keep an unstyled table elsewhere on the same practice page for comparison.

Reading the shared-style sample

• table.grid scopes rules so not every table on the page must look identical
• One rule styles both th and td inside .grid
• Changing padding or color in one place updates the whole grid
• You still write normal tr/th/td rows — CSS never replaces those elements
• Later CSS courses deepen selectors; here the goal is a clean, repeatable border recipe
• If nothing changes visually, check that the class="grid" spelling matches the stylesheet selector exactly

Collapse, spacing, and readability

Without border-collapse: collapse, many browsers show separate borders that look like double lines or a raised grid. Collapse is the usual beginner choice for data tables because it reads as one coherent spreadsheet-like surface. Padding inside cells matters as much as the line itself: zero padding makes text feel glued to the border and tiring to scan. Start with 6px–8px and adjust by eye on your practice page. Color is optional — a neutral gray or dark charcoal is enough for learning; loud colors can distract from the numbers you are comparing.

Structure stays; look moves

Do not delete th headers because CSS exists. Do not put tabular relationships only in colored boxes without real table markup. Borders are decoration and clarity on top of the skeleton you built in the Tables session. If the data is not tabular, go back to lists — prettier lines will not fix the wrong element choice. Likewise, do not revive nested layout tables just because borders suddenly look nice; page regions still belong to structure and CSS layout later.

Practice in your editor

1. Reuse (or recreate) a small practice table from the Tables session with real th/td cells.
2. Add borders with CSS — first try inline styles on each cell so you see every property.
3. Turn border-collapse on and off to compare double lines versus a single grid.
4. Add padding so text sits comfortably inside each cell; try 4px then 8px.
5. Refactor to a class plus a short <style> block like the second sample.
6. Confirm headers are still th and data cells still td after styling.
7. Optionally restyle only .grid th with a slightly stronger border or background to emphasize labels — without changing the HTML meaning.

Easy mistakes

• Relying only on obsolete presentational attributes like border="1" for serious sites
• Leaving borders without collapse and wondering why lines look thick or doubled
• Zero padding so text touches the border
• Styling with CSS but removing semantic th labels
• Applying a global td { border: ... } that accidentally restyles unrelated tables
• Treating border CSS as a reason to build page layout with nested tables again
• Mixing inline borders on some cells and forgetting others, so the grid looks broken

Summary

• Prefer CSS border on th and td (and collapse on table)
• border-collapse: collapse cleans the grid into single lines
• Padding improves readability inside cells
• Structure stays in HTML; look stays in CSS
• Avoid depending on the obsolete border attribute for new work
• Refactor repeated inline borders into a class when the table grows
• Next size-focused lessons can tune widths once the grid lines already look intentional