How to create a table only using `` tag and CSS

Mimicking table spacing with CSS

When you're not using actual <table>, replicate table-like spacing using CSS margins:

.cell { margin: 0.5em; /* Exactly a lil' space for our cell 📦 */}


For those who still cherish older browsers, switch modern spacing techniques with inline-block and margin adjustment:

.cell { 
  display: inline-block; /* Going retro here 💾 */
  margin-right: -4px; /* Because older browsers like it edgy 😉 */
}


Dealing with legacy browsers

Accommodating anachronistic Internet Explorer versions can be tricky. For instance, for IE7, we trade display: table-cell for float: left:

.row { 
  overflow: hidden;  /* Just clearing the floating rubbish here 🚮 */
}
.cell { 
  float: left; /* Let's take a float back to the past 🏊‍♂️ */
  width: 50%; /* Because half is sometimes better than the whole 🥐 */
}


For a retro touch, serve up conditional CSS for IE7 using <!--[if lt IE 8]>:

<!--[if lt IE 8]>
<style>
  .cell { float: left; width: 50%; /* Because ancient explorers love wide views 👀 */}
</style>
<![endif]-->


Maintaining layout consistency

To ensure consistent layouts, use clearfix method to clear floats on .row and avert subsequent content from wrapping around floated elements:

.row:after {
  content: "";
  display: block;
  clear: both; /* Oops! We had some floaters. All clean now ✅ */
}


Imbuing semantic meaning with divs

Even though using divs for table-making may raise a few eyebrows, maintaining semantic significance shouldn’t be thrown out of the window, especially for accessibility. Entities like ARIA roles, for example, are worth considering:

<div class="table" role="table">
  <div class="row" role="row">
    <div class="cell" role="cell" data-label="Column A">A1</div>
    <div class="cell" role="cell" data-label="Column B">B1</div>
  </div>
</div>


Exploring modern CSS alternatives

Unchained from the div concession, you can explore greener pastures like CSS Grid and Flexbox:

.table { display: grid; grid-template-columns: repeat(2, 1fr); /* It's a grid bonanza 🎉 */}
.cell { padding: 5px; border: 1px solid #ccc; /* Ain't nobody got time for unstyled cells! 🎨 */}


These powerful layout systems can supersede traditional tables providing you with flexible, cleaner codes.

Implementing responsive design

Responsive design is a must to ensure your pseudo-table is ready for screens of all shapes and sizes. Use media queries and adjust cell display properties accordingly:

@media only screen and (max-width: 600px) {
  .table-cell { 
    display: block; /* Because mobile devices prefer long reads 📚 */
    width: 100%; /* Total make-over for our cell on small screens 💅 */
  }
}


Visualization

Who says coding can't be fun? We're basically constructing a table with <div> elements and CSS analogous to playing with building blocks:

|        📐 CSS Style          |     🧱 Structure     |
|:----------------------------|:---------------------:|
| `display: flex;`            |      [  🚪  ]         | <-- row
| `flex-direction: row;`      | [🚪][🚪][🚪]          | <-- cells in a row

Each <div> is a building block:

🧱 = <div class="table-row"></div> // This block is our table row. 🧱 = <div class="table-cell"></div> // This block is a single cell.

Putting it together:

.table-row {
  display: flex; /* We're going all in for flexible alignments 💪 */
}

.table-cell {
  flex: 1; /* Flexing not just our muscles, but our cells too 💼 */
}


With just a bit more effort, we manage to build a flexible and responsive table - stack by stack!

Advanced techniques

If you're into advanced styling, properties like box-shadow can simulate cell borders, while :nth-child() selector can provide alternating background colors:

.cell { 
  box-shadow: 0 0 5px rgba(0,0,0,0.1); /* Shadow play for cells, because borders are mainstream 👥 */
  background-color: nth-child(even) ? '#333' : '#fff' /* Checkers, anyone? 🏁 */
}


Performance considerations

With vast data quantities, performance and load time become crucial. Strive for efficient rendering paths, such as avoiding excess nested divs and minimizing CSS complexity. You wouldn't want your users to wait while your table is still under construction scope is too long. Scope needs to be defined