HTML Table

To make a table in HTML, we need only a few different tags. First, we need to have a parent <table> tag that wraps around all our content. Within that, we’ll have some <tr> tags that represent our table rows. Inside of our table rows, we’ll have some table data inside of <td> tags. Inside of our first <tr> tag, we’ll use <th> tags to represent the headers of each column.

There are many different ways to style a HTML Table, for example we can use mostly all CSS properties to modify how the table appears to users on their screen. Some of the easiest ways are to change the border of the table cells, or even the background color of the cells or rows. We can also modify the width or height of the table or specific columns and rows within the table. 

We can accomplish styling by either adding the style attribute to an element, or by using external stylesheets and targeting the proper elements.

Changing the border of an HTML Table is a great way to immediately change how the table appears to a user. By targeting the table, th & td elements, you can add a border to the entire table as well as the cells within. 

When adding a border to a table and all its cells, it can appear as a double line border, which is not always the intention. In order to combat this, we can use the border-collapse CSS property and set the value to collapse: this will collapse the borders into a single border. 

Using the CSS border property, we have access to change the style of the border, as well as the color and the width. Changing the style can result in a solid, dashed, or even dotted border to our table and cells! There are many different styles to choose from. 

Changing the width of the border can result in very thin or thick border lines, as well as changing the color will change the overall look of the table border. 

We can also change the border-radius property which can round out all of our corners.

In order to make up an HTML table, we need to wrap everything within a <table> tag. Below that we have 2 main tags to help define our content. 

1. <tr> – table row
2. <td> – table data (cell)

We use these in conjunction to define our table data. The table row tag is used as a parent tag to the table data tags, and define where a table row should begin and end in terms of its data. We can have as many <td> tags within a <tr> tags as we choose, the more <td> tags, the longer our table row will be.

A <th> tag, or table header, can be used within a table to denote the meaning of the table columns. These would be placed within the first <tr> tag within the <table> tag. The order of the <th> tags will determine the order of how one would place the <td> tags in subsequent rows so that they correspond to the headers.