There are some projects you'll be working on where you'll need to visually display the information; these projects could be ones from a company or a school, and you might need to show the results of school tests and exams so that the readers will clearly understand it and there won't be any misunderstandings.

The most practical approach to achieve this and make it more responsive is to compile all of this enormous information using HTML tables and style it with CSS.

I assumed you were familiar with the fundamentals of HTML and how to style an HTML document using CSS. If not, you can read these articles to learn more.

Therefore, I'm going to outline the step-by-step process in this article that you must follow in order to create HTML Tables and effectively style them using CSS. If you adhere to everything that is stated here, you will be able to create HTML Tables and effectively style them.

So let's dive in!

A table is similar to a spreadsheet that is organized in rows and columns; HTML tables were created to provide a simple way to mark up structured tabular data and to display that data in a format that is easy for users to read and digest. As a result, the use of tables in web development has grown significantly.

HTML table tags are required to create a table in HTML. The most crucial one is the <table> tag, which serves as the table's primary container. It displays the beginning and end of the table as well as any nesting and inserting of additional tables.

It will be displayed like this below;

<table>
••••••
</table>

ROWS

A table can have as many rows as necessary depending on how much information needs to be displayed. Rows can be added using the table row tag <tr> after the table has been defined using the <table> tag.

tr stands for table row.

It can be displayed as shown below;

<table>
<tr>
•••••
</tr>
</table>

HEADER

The <th> tag can be used to add headings to tables. Typically, the table heading will always take the top row, which means that the <th> declaration will come in the first table row, followed by the table's actual data. By default, the heading text passed in is centered and bold.

Let's check the example below;

<table>
  <tr>
    <th>NAME </th>
    <th>Country</th>
    <th>State</th>
![Screenshot_20220928-103024_anWriter free.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1664357447431/hNCYO-ZRG.jpg align="left")
- 

  </tr>
</table>

The output is shown below

As we can see above , we are able to specified the heading using the <th> tag.

TABLE DATA

Data cells may be added to a table using the table data, or <td>,element after the table's rows have been established and set up. Within a table row, columns are made by sequentially listing various <td> items.

We can create a table using it a a shown below;

<table>
  <tr>
    <th>Name</th>
    <th>Country</th>
    <th>State</th>
  </tr>
  <tr>
   <td>MUHAKEEM</td>
   <td>NIGERIA</td>
   <td>LAGOS</td>
  </tr>
</table>

As you can how it's used above, although it's not yet styled , we will do that later .We can also add another data to the table using the <td> tag.

<table>
  <tr>
    <th>Name</th>
    <th>Country</th>
    <th>State</th>
  </tr>
  <tr>
   <td>MUHAKEEM</td>
   <td>NIGERIA</td>
   <td>LAGOS</td>
  </tr>
  <tr>
    <td>MUHAKEEM</td>
    <td>NIGERIA</td>
    <td>LAGOS</td>
  </tr>
</table>

SCOPE

A table header's relationship to specific content can be determined with the help of the scope attribute. The scope attribute defines whether a table header applies to a row or column using the values col, row, colgroup, and rowgroup. Col and row are the values that are most frequently utilized. Every cell in the column and every cell in the row are directly related to the table headers, as indicated by the col and row values, respectively.

The attribute is declared in the header cell <th>, and it takes the values col, row, colgroup and rowgroup.

Let's look at the example below;

<table>
  <tr>
    <th></th>
    <th scope="col">Name</th>
    <th scope="col">Country</th>
  </tr>

  <tr>
    <td>1</td>
    <td>Muhakeem</td>
    <td>Lagos</td>
  </tr>

  <tr>
    <td>2</td>
    <td>Muhakeem</td>
    <td>Nigeria</td>
  </tr>

  <tr>
    <td>2</td>
    <td>Muhakeem</td>
    <td>Lagos</td>
  </tr>
</table>

Since we said the scope will be declared in the table header section.

CAPTION

A table's caption or title can be provided using the <caption> element, which by default is placed at the top of a table and must appear right after the opening <table> tag.

So now let's use the above as an example by using the caption element.

<caption> MUHAKEEM DETAILS</caption>
  <tr>
    <th></th>
    <th scope="col">Name</th>
    <th scope="col">Country</th>
  </tr>

  <tr>
    <td>1</td>
    <td>Muhakeem</td>
    <td>Lagos</td>
  </tr>

  <tr>
    <td>2</td>
    <td>Muhakeem</td>
    <td>Nigeria</td>
  </tr>

  <tr>
    <td>2</td>
    <td>Muhakeem</td>
    <td>Lagos</td>
  </tr>
</table>

FOOTER, HEADER AND BODY IN HTML TABLE.

• <thead> - provides a separate haeder for the table

• <tbody> - conatins main content of the table

• <tfoot> - creates a separete footer for the table

COMBINING CELLS

By employing the two cell characteristics <colspan> for horizontal spanning and <rowspan> for vertical spanning, we may group multiple cells together in an HTML table. When the two properties are given values larger than zero, it indicates how many cells you want to span.

Example can be found below.

<table>
  <thead>
    <tr>
      <th colspan="2">Name</th>
      <th colspan="2">Country</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Nigeria</td>
      <td>USA</td>
      <td>UK</td>
      <td>ITALY</td>
    </tr>
    <tr>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$300,000</td>
      <td>$70,000</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th colspan= "4">I love Nigeria</th>
    </tr>
  </tfoot>
</table>

TABLE BORDER

Your tables will appear more responsive and readable to readers if you add borders to them. When a user is attempting to comprehend data and swiftly scan for information, the borders around a table or individual cells can have a significant impact. border-collapse and border-spacing are two CSS attributes that will immediately be useful for creating table borders.

One of the border properties that determines a table's border model is the **border-collapse property.** The border-collapse property has three possible values, which are shown below: collapse, separate, and inherit. The border-collapse property value was initially separate, causing all of the borders to stack up next to one another as previously mentioned. On the other hand, the collapse value merges the borders into one, with the table cell serving as the main border.

So now let's add border to the example we show above and check how it will look;

<style type="text/css">
table {
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #cecfd5;
  padding: 10px 15px;
}

</style>
<title>MUHAKEEM</title>
</head>
<body>
<table>
  <thead>
    <tr>
      <th colspan="2">Name</th>
      <th colspan="2">Country</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Nigeria</td>
      <td>USA</td>
      <td>UK</td>
      <td>ITALY</td>
    </tr>
    <tr>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$300,000</td>
      <td>$70,000</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th colspan= "4">I love Nigeria</th>
    </tr>
  </tfoot>
</table>

The output is shown below;

We can also increase the border,let's increase the border from 2 to 5 and check out our table looks like;

Summary;

border; specifies whether or not table borders should be collapsed

boorder-collapse; sets all border properties in a single declaration

border-spacing; specifies the distance between the caption-side boundaries of adjacent cells; specifies the location of empty cells

table caption; specifies whether or not empty cells in a table

table-layout will display borders and backgrounds; sets the table's layout algorithm to be utilized.

TABLE TAG

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a

<colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot>Groups the footer content in a table

Conclusion

Thanks for reading! Let's me know your best table tag and element in the comment section, you can also learn more by going to my blog here