🔥Limited Offer: Get 50% OFFon AI & Full Stack Courses🔥
Back to CSS Notes
Topic #60

CSS Tables

Tables present data in rows and columns, and CSS makes them readable and responsive. Borders, padding and zebra stripes transform plain tables.

CSS Notes · Coding Now Tech Institute3 min readSource

HTML tables can be greatly improved with CSS:

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

CSS Table Borders

The CSS border property is used to specify the width, style, and color of table borders.

The border property is a shorthand property for:

  • border-width - sets the width of the border
  • border-style - sets the style of the border (required)
  • border-color - sets the color of the border

The example below specifies a 1px solid border for

,
, and elements:

Firstname Lastname
Peter Griffin
Lois Griffin

Example

table, th, td {

  border: 1px solid;

}

CSS Table Border Color

The example below specifies a 1px solid green border for

,
, and elements:

Firstname Lastname
Peter Griffin
Lois Griffin

Example

table, th, td {

  border: 1px solid green;

}

Note: Why Double Borders? Notice that the tables in the examples above have double borders. This is because both the

,
, and elements have separate borders. To remove double borders, take a look at the example below.

CSS Collapse Table Borders

The CSS border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.

This property can have one of the following values:

  • separate - Default value. Borders are separated; each cell will display its own borders
  • collapse - Borders are collapsed into a single border when possible

The following table has collapsed borders:

Firstname Lastname
Peter Griffin
Lois Griffin

Example

table
{

  border-collapse: collapse;

}

CSS Table Padding

To control the space between the border and the content in a table, use the padding property on

and elements:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Example

th, td
{

padding: 10px;
}

CSS Border Spacing

The CSS border-spacing property sets the distance between the borders of adjacent cells.

Note: This property works only when border-collapse is set to "separate".

The following table has a border-spacing of 15px:

Firstname Lastname
Peter Griffin
Lois Griffin

Example

table
{

  border-collapse: separate;
  border-spacing: 15px;
}

CSS Outside Table Borders

If you just want a border around the table (not inside), you specify the border property only for the

element:

Firstname Lastname
Peter Griffin
Lois Griffin

Example

table
{
  border: 1px solid;

}
PreviousCSS ListsNext Table Size

Want to go beyond the notes?

Join Coding Now Tech Institute's CSS course — live mentorship, real projects, and 100% placement support.

Enroll Now — Free Demo Available

CSS Tables – FAQs

Quick answers about learning CSS Tables in CSS.

This free note from Coding Now Tech Institute explains CSS Tables in CSS — concept, syntax and worked code examples you can copy, run and revise before interviews.
Yes. Every CSS topic on Coding Now Tech Institute, including CSS Tables, is 100% free with no signup required.
With focused practice, most students grasp CSS Tables in 1–3 days from these notes; pairing it with Coding Now Tech Institute's mentor-led course takes you to job-ready depth faster.
Use the code examples in this note, then ask doubts for free on the Coding Now Tech Institute Community (/community) — expert instructors answer within 24 hours.
Call NowEnroll Now