What's the best way to create HTML tables and what are your favorite alternatives?

2 The challenges of HTML tables

While HTML tables are easy to create, they can also pose some challenges when it comes to styling, accessibility, and responsiveness. For example, you might want to add some colors, borders, padding, or alignment to your table, but the default CSS properties for tables are limited and often inconsistent across browsers. You can use some CSS tricks to overcome these limitations, such as adding classes, pseudo-elements, or custom properties to your table elements, but this can also make your code more complex and harder to maintain. Another challenge is to make your table accessible to users who rely on screen readers or other assistive technologies. You can use some HTML attributes, such as scope, summary, or aria-label, to provide more information and context to your table, but you also need to test your table with different devices and tools to ensure it's readable and understandable. Finally, you might want to make your table responsive to different screen sizes and orientations, but this can also be tricky with HTML tables, as they tend to overflow or shrink when the viewport changes. You can use some CSS techniques, such as media queries, overflow properties, or flexbox, to make your table adapt to different scenarios, but you also need to consider how this affects the usability and layout of your table.

3 The alternatives to HTML tables

Given the challenges of HTML tables, you might wonder if there are any alternatives that can offer more flexibility, simplicity, or functionality. The answer is yes, there are some options that you can explore, depending on your needs and preferences. One option is to use a CSS grid layout, which allows you to create a grid of columns and rows with more control over the alignment, spacing, and sizing of your elements. You can use the display: grid property and other grid-related properties to define your grid and place your elements inside it. Here's an example of a CSS grid layout that mimics a table:

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-gap: 10px;
  }
  .grid > div {
    padding: 10px;
    border: 1px solid black;
    text-align: center;
  }
  .grid > div:first-child {
    grid-column: span 3;
  }
  .grid > div:nth-child(2),
  .grid > div:nth-child(3),
  .grid > div:nth-child(4) {
    font-weight: bold;
    background-color: lightgray;
  }
</style>
<div class="grid">
  <div>Monthly sales report</div>
  <div>Product</div>
  <div>Quantity</div>
  <div>Price</div>
  <div>Shoes</div>
  <div>20</div>
  <div>$50</div>
  <div>Hats</div>
  <div>15</div>
  <div>$25</div>
  <div>Shirts</div>
  <div>10</div>
  <div>$30</div>
</div>        

Another option is to use a HTML list, which allows you to create a list of items with different levels of indentation and hierarchy. You can use the <ul> or <ol> tags to create an unordered or ordered list, and nest other <li> tags inside them to create sublists. You can also use the CSS list-style-type property to customize the appearance of your list items, such as using bullets, numbers, or icons. Here's an example of a HTML list that mimics a table:

<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  li {
    padding: 10px;
    border: 1px solid black;
    text-align: center;
  }
  li > ul {
    display: flex;
    flex-direction: row;
  }
  li > ul > li {
    flex: 1;
  }
  li:first-child {
    font-weight: bold;
    background-color: lightgray;
  }
</style>
<ul>
  <li>Monthly sales report</li>
  <li>
    <ul>
      <li>Product</li>
      <li>Quantity</li>
      <li>Price</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>Shoes</li>
      <li>20</li>
      <li>$50</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>Hats</li>
      <li>15</li>
      <li>$25</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>Shirts</li>
      <li>10</li>
      <li>$30</li>
    </ul>
  </li>
</ul>        

A third option is to use a HTML div, which allows you to create a generic container for any content. You can use the display: block or display: inline-block properties to control how your divs behave and stack on the page, and use other CSS properties to style and position them. Here's an example of a HTML div that mimics a table:

<style>
  .container {
    display: block;
    width: 100%;
  }
  .row {
    display: block;
    width: 100%;
  }
  .cell {
    display: inline-block;
    width: 33%;
    padding: 10px;
    border: 1px solid black;
    text-align: center;
  }
  .row:first-child > .cell {
    font-weight: bold;
    background-color: lightgray;
  }
</style>
<div class="container">
  <div class="row">
    <div class="cell">Monthly sales report</div>
  </div>
  <div class="row">
    <div class="cell">Product</div>
    <div class="cell">Quantity</div>
    <div class="cell">Price</div>
  </div>
  <div class="row">
    <div class="cell">Shoes</div>
    <div class="cell">20</div>
    <div class="cell">$50</div>
  </div>
  <div class="row">
    <div class="cell">Hats</div>
    <div class="cell">15</div>
    <div class="cell">$25</div>
  </div>
  <div class="row">
    <div class="cell">Shirts</div>
    <div class="cell">10</div>
    <div class="cell">$30</div>
  </div>
</div>