CSS Tables – CSS Notes | Aivasu Tech Institute

Name: Aivasu Tech Institute
Address: 2nd Floor, Kapil Vihar, Opp. Metro Pillar No.354, Pitampura, New Delhi, Delhi, 110034, IN
Telephone: +91-9667708830
Price range: ₹₹

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;

}
Share: WhatsApp LinkedIn Copy / Share
PreviousCSS Lists Next Table Size
Want to go beyond the notes?
Join Aivasu Tech Institute's CSS course — live mentorship, real projects, and 100% placement support.
Enroll Now — Free Demo Available
CSS Notes — All Topics
CSS Tutorial
1CSS HOME 2CSS Introduction 3CSS Syntax 4CSS Selectors 5Grouping Selectors 6CSS How To 7Add Internal CSS 8Add Inline Style 9Multiple Style Sheets 10CSS Comments 11CSS Errors 12CSS Colors 13RGB / RGBA 14HEX / HEXA 15HSL / HSLA 16CSS Backgrounds 17Background Image 18Background Repeat 19Background Attachment 20Background Shorthand 21CSS Borders 22Border Width 23Border Color 24Border Sides 25Border Shorthand 26Rounded Borders 27CSS Margins 28Margin Collapse 29CSS Padding 30Padding box-sizing 31CSS Height / Width 32Min / Max 33CSS Box Model 34CSS Outline 35Outline Width 36Outline Color 37Outline Shorthand 38Outline Offset 39CSS Text 40Text Alignment 41Text Decoration 42Text Decoration Styles 43Text Transformation 44Text Spacing 45Text Shadow 46CSS Fonts 47Font Web Safe 48Font Fallbacks 49Font Style 50Font Size 51Font Google 52Font Pairings 53Font Shorthand 54CSS Icons 55Icons: Bootstrap 56Icons: Google 57CSS Links 58Link Buttons 59CSS Lists 60CSS Tables 61Table Size 62Table Alignment 63Table Styling 64Table Responsive 65CSS Display 66Visibility / Hide 67CSS Max-width 68CSS Position 69Fixed/Absolute Position 70Sticky Position 71CSS Position Offsets 72CSS Z-index 73CSS Overflow 74Overflow X and Y 75CSS Float 76Clear / Clearfix 77Float Examples 78CSS Inline-block 79CSS Align 80Horizontal Align 81Vertical Align 82CSS Combinators 83CSS Pseudo-classes 84Interactive 85Structural 86CSS Pseudo-elements 87Text 88Content 89CSS Opacity 90CSS Navigation Bars 91Vertical Navbar 92Horizontal Navbar 93CSS Dropdowns 94Advanced Dropdowns 95CSS Image Gallery 96CSS Image Sprites 97CSS Attribute Selectors 98Advanced Attr Selectors 99CSS Forms 100Style Inputs 101Input Focus / Icons 102Other Form Elements 103CSS Counters 104Nested Counters 105CSS Units 106Absolute Units 107Relative Units 108CSS Inheritance 109CSS Specificity 110Specificity Hierarchy 111CSS !important 112CSS Math Functions 113CSS Optimization 114CSS Accessibility 115CSS Website Layout
Other sections
CSS Advanced (55)CSS Flexbox (6)CSS Grid (11)CSS Responsive (8)
✳ Common questions
CSS Tables – FAQs
Quick answers about learning CSS Tables in CSS.
This free note from Aivasu 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 Aivasu 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 Aivasu 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 Aivasu Tech Institute Community (/community) — expert instructors answer within 24 hours.
Aivasu Tech Institute
India's premier AI & Full Stack training institute — bridging the gap between education and industry with hands-on mentorship and 100% placement support.
2nd Floor, Kapil Vihar, (Opp. Metro Pillar No.354)
Pitampura, New Delhi – 110034
+91 9899508745
[email protected]
Mon – Sat: 9:00 AM – 7:00 PM
Find Us Here
AI & Data
Generative AI Prompt Engineering AI Engineering Diploma Data Science Data Analytics
Full Stack
AI-Integrated Full Stack Python Full Stack MERN Stack MEAN Stack React Full Stack .NET Full Stack
Cloud & Cyber
AWS Developer Associate AWS Solutions Architect Azure Administrator Google Cloud Ethical Hacker (C|EH)CISSP
Stay Updated
Get latest course updates, offers & career tips directly in your inbox.
No spam. Unsubscribe anytime.
Company
About Us Our Mission Contact Us
© 2026 Aivasu Tech Institute. All rights reserved.
Privacy Policy Terms of Use Refund Policy Contact
Call Now Enroll Now
Home/Notes/CSS/CSS Tutorial/CSS Tables
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 · Aivasu Tech Institute3 min readSource
In this lesson
CSS Table Borders CSS Table Border Color CSS Collapse Table Borders CSS Table Padding CSS Border Spacing CSS Outside Table Borders
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;

}
Share: WhatsApp LinkedIn Copy / Share
PreviousCSS Lists Next Table Size
Want to go beyond the notes?
Join Aivasu Tech Institute's CSS course — live mentorship, real projects, and 100% placement support.
Enroll Now — Free Demo Available
CSS Notes — All Topics
CSS Tutorial
1CSS HOME 2CSS Introduction 3CSS Syntax 4CSS Selectors 5Grouping Selectors 6CSS How To 7Add Internal CSS 8Add Inline Style 9Multiple Style Sheets 10CSS Comments 11CSS Errors 12CSS Colors 13RGB / RGBA 14HEX / HEXA 15HSL / HSLA 16CSS Backgrounds 17Background Image 18Background Repeat 19Background Attachment 20Background Shorthand 21CSS Borders 22Border Width 23Border Color 24Border Sides 25Border Shorthand 26Rounded Borders 27CSS Margins 28Margin Collapse 29CSS Padding 30Padding box-sizing 31CSS Height / Width 32Min / Max 33CSS Box Model 34CSS Outline 35Outline Width 36Outline Color 37Outline Shorthand 38Outline Offset 39CSS Text 40Text Alignment 41Text Decoration 42Text Decoration Styles 43Text Transformation 44Text Spacing 45Text Shadow 46CSS Fonts 47Font Web Safe 48Font Fallbacks 49Font Style 50Font Size 51Font Google 52Font Pairings 53Font Shorthand 54CSS Icons 55Icons: Bootstrap 56Icons: Google 57CSS Links 58Link Buttons 59CSS Lists 60CSS Tables 61Table Size 62Table Alignment 63Table Styling 64Table Responsive 65CSS Display 66Visibility / Hide 67CSS Max-width 68CSS Position 69Fixed/Absolute Position 70Sticky Position 71CSS Position Offsets 72CSS Z-index 73CSS Overflow 74Overflow X and Y 75CSS Float 76Clear / Clearfix 77Float Examples 78CSS Inline-block 79CSS Align 80Horizontal Align 81Vertical Align 82CSS Combinators 83CSS Pseudo-classes 84Interactive 85Structural 86CSS Pseudo-elements 87Text 88Content 89CSS Opacity 90CSS Navigation Bars 91Vertical Navbar 92Horizontal Navbar 93CSS Dropdowns 94Advanced Dropdowns 95CSS Image Gallery 96CSS Image Sprites 97CSS Attribute Selectors 98Advanced Attr Selectors 99CSS Forms 100Style Inputs 101Input Focus / Icons 102Other Form Elements 103CSS Counters 104Nested Counters 105CSS Units 106Absolute Units 107Relative Units 108CSS Inheritance 109CSS Specificity 110Specificity Hierarchy 111CSS !important 112CSS Math Functions 113CSS Optimization 114CSS Accessibility 115CSS Website Layout
Other sections
CSS Advanced (55)CSS Flexbox (6)CSS Grid (11)CSS Responsive (8)
✳ Common questions
CSS Tables – FAQs
Quick answers about learning CSS Tables in CSS.
This free note from Aivasu 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 Aivasu 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 Aivasu 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 Aivasu Tech Institute Community (/community) — expert instructors answer within 24 hours.