How to make a table without using the HTML table elements

One day you'll be working on a project that needs a table. You have the option of making a table a few different ways: using HTML, using CSS, or using JavaScript. They each have their pros and cons, but if you don't want to deal with all of the <table> tags in HTML or write code for it in JavaScript, you can always use CSS.

It's relatively straight forward to make a simple table using CSS. All you need to know are the basics of HTML and CSS. To make a table without the <table> elements, you'll be using a lot of <div> elements. The good thing about <div> elements is that they don't come pre-loaded with styles like the <table> elements do. That means you can apply styles without wondering why something looks off.

We're going to walk through a quick guide on making a table with this method. The first thing you need is your HTML. We're going to make a 3 x 3 table to keep things simple.

<div class="table">
   <div class="column">
       <div class="row"></div>
       <div class="row"></div>
       <div class="row"></div>
   </div>
   <div class="column">
       <div class="row"></div>
       <div class="row"></div>
       <div class="row"></div>
   </div>
   <div class="column">
       <div class="row"></div>
       <div class="row"></div>
       <div class="row"></div>
   </div>
</div>

You'll notice that there are some classes on these <div> tags. I like to keep things simple so we'll just use some basic names: table, row, and column. You can probably guess what each of the <div> elements are based on their class name alone.

At the moment if you opened this in a browser you wouldn't see anything. That's because there aren't any styles on these elements. Now it's time to write the CSS.

.table {
    display: flex;
}

.column {
    margin-bottom: 1em;
    width: 100%;
}

.row {
    border: 1px black solid;
    height: 3em;
    margin: auto;
    width: 100%;
}

The styles for this table aren't complicated. The important thing to note is the flex value on the table class. This is what puts the column divs next to each other. In the row class, you'll see values for the border and height properties. These don't have to be here for your table to work. They're here right now so I can show you what this looks like.

Now you can write any code inside of the row divs and it'll show up in this table. This is by no means the only way to make a table using CSS. There's a whole thing on CSS Flexbox and CSS Grid that I'm writing and it'll definitely show you there's more to it.

Go use this code to make your own table and play around with it. Any time you play with code, you learn something new even if it's relatively small.

I hope this taught you something new! Or at least kept you occupied for a few minutes. :)

---

Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding

Comments

[Samir Saeedi]

Semantics? Accessibility?

[Samir Saeedi]

If you don't like the way browsers render tables by default, you can always change their display css property, so you can retain the semantics.

[Thomas Landin]

Seconded! If you're putting a table on your page, use <table> tags. Going out of your way to avoid tables is just as bad as using tables for layout. Something we stopped doing 20 years ago...

[Ghost]

Thirded! HTML5 has semantic meanings. This is just a hair better than styling a DIV, giving it a click-handler and turning it into a button instead of actually using a <button>

[Robert Lippens]

I recently had to implement a table for a side project I am working on, and went ahead with a CSS Grid (browser support is good enough) table made of divs. It works great and you also avoid the restrictions that standard HTML tables can place on your design.

[Chad Windham]

Um... Not trying to be a jerk. But instead of display: flex; Why not display: grid; ?

[Milecia]

No worries about being a jerk! There's no reason you can't use grid instead of flex. This was just one of the many ways you can make a table.