CSS Tables

Tables are a useful way to display data in rows and columns on a webpage. In this tutorial, we will go over how to use CSS to style your tables and make them more visually appealing. To create a basic table in HTML, you will need to use the <table> tag. Here is an example of a simple table with fictional data:

Product	Price
Product A	$10
Product B	$20

To add some style to your table using CSS, you can use the <style> tag in the <head> section of your HTML document, or include it in an external stylesheet. Here is an example of how you can style your table:


table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

th {
  background-color: #4CAF50;
  color: white;
}

With these CSS styles, your table will have borders around each cell, alternating row colors, and a different background color for the header row. Now, when you include this CSS in your HTML document and apply it to your table, it will look like this:

Result:

Product	Price
Product A	$10
Product B	$20

You can customize the styles further by changing the colors, fonts, and other properties to match the design of your website. In conclusion, using CSS to style your tables can help make your data more visually appealing and easier to read. Experiment with different styles and layouts to find what works best for your content.