We can use tables to structure data in columns and rows. The table is the HTML way to lay out the data. The CSS way to create the layout on the web page is CSS float, flexbox, and CSS grid.

We cover an example to understand how to create a table on the web page. You can view the HTML table example at the below codepen link:

For example, we can create a table in HTML for customer’s grocery item bill as below:

<table border="3" cellpadding="10" cellspacing="0">
   <caption>Grocery Items Bill</caption>
   <thead>
      <colgroup>
         <col width="60%">
         <col width="20%">
         <col width="20%" span="1" style="background-color:#f1f1f1;">
      </colgroup>
      <tr>
         <th align="left" class="col-item-name">Item Name</th>
         <th align="center" class="col-quantity">Quantity</th>
         <th align="center" class="col-price">Price</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Potatoes</td>
         <td align="center">51</td>
         <td align="center">$1.00</td>
      </tr>
      <tr>
         <td>Nuts</td>
         <td align="center">20</td>
         <td align="center">$5</td>
      </tr>
      <tr>
         <td>Onions</td>
         <td align="center">4</td>
         <td align="center">$3.00</td>
      </tr>
      <tr>
         <td>Very long awkwardly named yet still delicious item here</td>
         <td align="center">4</td>
         <td align="center">$3.00</td>
      </tr>
      <tr>
         <td>Carrots</td>
         <td align="center">12</td>
         <td align="center">$2.99</td>
      </tr>
   </tbody>
   <tfoot>
      <td class="price_txt" scope="col" colspan="2">Total Price</td>
      <td align="center" >$33.79</td>
   </tfoot>
</table>

The above code creates an HTML table on the page (without CSS) as below:

To structure the HTML table, we have to use proper tags and attributes in the code. Some of the HTML tags that we can use in the table are described below.

Also, in the code, we use attributes to assign properties for the HTML table. Some of the attributes are described below.

#html #css #html-table #css3 #flexbox