How to make a table in HTML CSS

Build an HTML table with CSS: see a step-by-step example to create a stylish table for your site.

Creating a Table in HTML CSS

Creating a table in HTML CSS is a simple process that involves using HTML tags and CSS properties. The HTML <table> tag is used to define a table, while the CSS properties are used to style the table. In this example, we will create a basic table with three columns and three rows. The HTML code for the table looks like this:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
  </tr>
</table>

The above code will create a basic table with three columns and three rows. However, the table will not look very good because it has no styling. You can use CSS properties to style the table. For example, you can add a border to the table using the following CSS code:

table {
  border: 1px solid #ccc;
}

The above code will add a 1 pixel thick border to the table with a color of #ccc (light gray). You can also use CSS to style the table cells. For example, you can add a background color to the table cells like this:

td {
  background-color: #eee;
}

The above code will add a light gray background color to the table cells. You can also style the table headers using the <th> tag. For example, you can add a bold font and a different background color like this:

th {
  font-weight: bold;
  background-color: #ddd;
}

The above code will add a bold font to the table headers and a different background color. You can also add other styling to the table such as padding, margins, font size, etc. CSS is a powerful language that can be used to style any HTML element.

To summarize, creating a table in HTML CSS is a simple process that involves using HTML tags and CSS properties. The HTML <table> tag is used to define a table, while the CSS properties are used to style the table. The HTML code for the table is used to define the structure of the table, while the CSS code is used to style the table. With the help of CSS properties, you can style the table in any way you want.