Learn CSS

"If you want to learn how to style and design web pages, you need to master CSS. CSS stands for Cascading Style Sheets, and it is the language that defines the appearance and layout of HTML elements. In this course, you will learn the basics of CSS, such as selectors, properties, values, units, and colors. You will also learn how to use CSS to create responsive web design, animations, transitions, and more. By the end of this course, you will be able to create beautiful and functional web pages using CSS."

CSS Chapters Menu

CSS Styling Tables

CSS can be used to style tables on a webpage, including changing the table layout, adjusting the padding and spacing, and adding borders and background colors. Here are some common CSS properties that can be used to style tables:

 

border-collapse: 

This property is used to collapse or separate the borders between table cells.


table {
 border-collapse: collapse; /* collapse or separate */
}

 

padding: 

This property is used to add spacing between the table cells and the border of the table.


table {
 padding: 10px;
}

 

border: 

This property is used to add borders around the table and table cells.


table {
 border: 1px solid #ddd;
}
td, th {
 border: 1px solid #ddd;
}

 

background-color: 

This property is used to add background colors to the table or table cells.


table {
 background-color: #f2f2f2;
}
td {
 background-color: #fff;
}

 

text-align: 

This property is used to align text within table cells.


td {
 text-align: center; /* left, center, right */
}

 

font-size and font-weight: 

These properties can be used to adjust the font size and weight of text within table cells.


td {
 font-size: 16px;
 font-weight: bold;
}


Here is an example of using CSS to style a simple table on a webpage:


<head>
 <style>
   /* Table styles */
   table {
     border-collapse: collapse;
     padding: 10px;
     border: 1px solid #ddd;
     background-color: #f2f2f2;
   }
   
   th {
     background-color: #333;
     color: #fff;
     text-align: left;
     padding: 10px;
     font-size: 20px;
   }
   
   td {
     border: 1px solid #ddd;
     padding: 5px;
     font-size: 16px;
     text-align: center;
   }
 </style>
</head>
<body>
 <h1>Student Grades</h1>
 
 <table>
   <thead>
     <tr>
       <th>Student</th>
       <th>Test 1</th>
       <th>Test 2</th>
       <th>Test 3</th>
       <th>Average</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>John</td>
       <td>85</td>
       <td>90</td>
       <td>92</td>
       <td>89</td>
     </tr>
     <tr>
       <td>Jane</td>
       <td>80</td>
       <td>85</td>
       <td>88</td>
       <td>84</td>
     </tr>
     <tr>
       <td>Bob</td>
       <td>92</td>
       <td>95</td>
       <td>90</td>
       <td>92</td>
     </tr>
   </tbody>
 </table>
 
 <p>What do you think of these grades? Let us know in the comments below.</p>
</body>


In this example, the table is styled with collapsed borders, 10 pixels of padding, a 1-pixel solid border, and a light gray background color. The table headings are styled with a dark gray background.