Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
Open In App
Next Article:
How to change Background Color in HTML ?
Next article icon

How to Change the Background Color of Table using CSS?

Last Updated : 30 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Changing the background color of a table using CSS can help improve the visual appearance of a website or web application. we will learn how to change the background color of the table using CSS with different approaches.

These are the following approaches:

Table of Content

  • Using Inline CSS
  • Using Internal CSS

Using Inline CSS

In this approach, we are using Inline CSS which involves applying styles directly to HTML elements using the style attribute. To change the background color of a table using inline CSS, we can use the background-color property.

Syntax:

<table style="background-color: colorName;">
  <!-- table content -->
</table>

Example: The below example uses the Inline CSS to Change the Background Color of Table.

HTML 
<!DOCTYPE html> <html> <head>   <title>Inline CSS Example</title> </head> <body>     <table style="background-color: yellow;" border="1">         <thead>             <tr>               <th>First Name</th>               <th>Last Name</th>               <th>Age</th>             </tr>           </thead>           <tbody>             <tr>                 <td>Virat</td>                 <td>Kohli</td>                 <td>39</td>               </tr>               <tr>                 <td>MS</td>                 <td>Dhoni</td>                 <td>47</td>               </tr>               <tr>                 <td>Rohit</td>                 <td>Sharma</td>                 <td>35</td>               </tr>           </tbody>         </table> </body> </html>

Output:

Screenshot-(74)

Using Internal CSS

In this approach we are using internal CSS to change the background color of a table, Here we define the CSS styles within a <style> tag and we set the background-color property of the table to the desired color.

Example: The below example uses the Internal CSS to Change the Background Color of Table.

HTML 
<!DOCTYPE html> <html> <head>   <title>Internal CSS Example</title>   <style>     table {       width: 100%;       border-collapse: collapse;       background-color: lightblue;     }     th, td {       border: 1px solid black;       padding: 8px;       text-align: center;     }   </style> </head> <body>   <table>     <thead>         <tr>           <th>First Name</th>           <th>Last Name</th>           <th>Age</th>         </tr>       </thead>       <tbody>         <tr>             <td>Virat</td>             <td>Kohli</td>             <td>39</td>           </tr>           <tr>             <td>MS</td>             <td>Dhoni</td>             <td>47</td>           </tr>           <tr>             <td>Rohit</td>             <td>Sharma</td>             <td>35</td>           </tr>       </tbody>     </table> </body> </html>

Output:


ms


Next Article
How to change Background Color in HTML ?
author
yuvrajghule281
Improve
Article Tags :
  • Web Technologies
  • HTML
  • CSS
  • CSS-Questions

Similar Reads

  • How to Change Selected Text Background Color in CSS?
    Sometimes, we need to change the color and background color of the selected text. The ::selection pseudo-element is used to change the background color of the selected text in CSS. This pseudo-element allows you to style the portion of text that has been selected by the user. Using ::selection Pseud
    2 min read
  • How to Change Background Color in HTML without CSS ?
    In HTML, you can change the background color of an element using the bgcolor attribute. However, it's important to note that the bgcolor attribute is deprecated in HTML5 and should be avoided in favor of using CSS for styling. This article will cover various methods to change the background color of
    2 min read
  • How to create texture background using CSS ?
    Introduction: We can use CSS property to texture the background of the web page by using an image editor to cut out a portion of the background. Apply CSS background-repeat property to make the small image fill the area where it is used. CSS provides many styling properties of the background includi
    3 min read
  • How to Change the Checkbox Background Color in CSS?
    Change the checkbox background color in CSS by hiding the default checkbox and using custom styles with the ::before and ::after pseudo-elements. This involves creating a custom checkbox that looks and works just like a regular checkbox but with your own design. Below are the approaches to change th
    2 min read
  • How to change Background Color in HTML ?
    The background color in HTML refers to the color displayed behind the content of a webpage. To change it, CSS (Cascading Style Sheets) is used, with various approaches available. In CSS, we define the background-color property within a CSS rule, specifying a color value such as a name, hexadecimal c
    3 min read
  • How to define the color of the border using CSS ?
    We can give the color of the border using border or border-color properties. We need to give border-style property. Approach 1: We will give the color of the border using the border property of CSS.We will give our CSS inside the tags which are also known as an inline style.We need to give the borde
    2 min read
  • How To Set Alternate Table Row Color Using CSS?
    To set alternate table row colors, we can use the :nth-child() pseudo-class in CSS. This technique helps improve the readability of a table by making it easier to differentiate between rows. In this article, we'll cover how to set alternate row colors using the :nth-child() pseudo-class and provide
    3 min read
  • How to change the background color of the active nav-item?
    In this article, we will learn how we can change the background of the active nav item with the help of CSS and jQuery. Given an HTML document containing a list of items, the task is to change the background color of a particular list item when it is active or clicked. We can change the background c
    3 min read
  • Set Background Color using CSS
    Setting the background color in CSS involves using the background-color property to define the color displayed behind the content within an HTML element. This can be achieved through three primary methods: inline CSS, internal CSS, and external CSS. Each method offers different advantages depending
    4 min read
  • How to set a background color to full page using Tailwind CSS ?
    Setting a full-page background color using Tailwind CSS means styling the entire viewport with a consistent background, regardless of content size. This is achieved by using classes like h-screen to cover the full height and bg-color or gradient classes to apply the desired color. Here are some comm
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences