HTML Tables: The Hidden Stars of the Early Web (And 15 Mind-Blowing Examples You Won't Believe Exist)

Ah, the good old HTML table. Once a web design superstar, now just a throwback that makes today’s developers shake their heads and say, “Not again.”

For anyone who remembers the early internet days, tables were everything. They weren't just for data; they were the web designer's go-to tool, like duct tape or a blank canvas.

Nested tables? That’s where the real fun (or chaos) began. Let’s take a trip down memory lane and give a shoutout to these unsung heroes while checking out some truly wild HTML table layouts. And guess what? No CSS needed!

A Quick Dive into HTML Tables

Back when CSS grids and Flexbox were dreams of the future, tables were the answer to everything. Want columns? Use a table. Need everything to line up perfectly? Table. Feeling brave and want to nest tables inside one another? Oh boy, you’re really going for it! Here’s a little background to appreciate the glory of tables:

• Introduced in HTML 3.2 (around 1997): Tables weren’t just a nice add-on— they changed the game. Web designers could now whip up complex layouts in no time.
• Overused for Layouts: Tables went beyond just displaying data; they became the Swiss Army knife for web design.
• Nesting Bonanza: Developers were nesting tables like dolls to create intricate designs. The result? Stunning, but also a total HTML mess.

Sure, modern marvels like Flexbox and CSS Grid came along and saved us from that mess, but today we’re here to celebrate the charm and flexibility of these old-school wonders.

Why Tables Still Rock

Before you roll your eyes at tables, let’s remember why they should still have a special place in your heart (and maybe in your coding):

• Universal Compatibility: Tables work on every browser, even the ones that haven’t seen an update since dial-up was a thing. 🚫🎮
• Versatility: They were the OG layout tool. Headers, footers, sidebars— you name it, and tables could do it.
• Survivor of the Web Chaos: When everything else goes south, table is there, ready to bring order to the chaos.

And now, let’s get to the exciting part: some jaw-dropping table designs that’ll flip everything you thought you knew about HTML upside down.

15 Mind-Blowing HTML Table Layouts You Have to See

1. Circular Table Layout

This table pulls off a circular look using smart mixes of rowspan and colspan.

<table border="1">
  <tr>
    <td colspan="4"></td>
    <td rowspan="3">Center</td>
    <td colspan="4"></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
</table>

2. Staggered Steps Table

A table that looks like a staircase, without any CSS.

<table border="1">
  <tr>
    <td>Step 1</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>Step 2</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>Step 3</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>Step 4</td>
  </tr>
</table>

3. Diamond Layout

A diamond-shaped table using strategic empty cells.

<table border="1">
  <tr>
    <td colspan="3"></td>
    <td>Top</td>
    <td colspan="3"></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td>Left</td>
    <td></td>
    <td>Right</td>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td></td>
    <td>Bottom Left</td>
    <td></td>
    <td>Center</td>
    <td></td>
    <td>Bottom Right</td>
    <td></td>
  </tr>
</table>

4. Zigzag Layout

A table that alternates cells left and right.

<table border="1">
  <tr>
    <td>Zig</td>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td>Zag</td>
  </tr>
  <tr>
    <td>Zig</td>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td>Zag</td>
  </tr>
</table>

5. Pyramid Layout

A pyramid-shaped table using rowspan and colspan strategically.

<table border="1">
  <tr>
    <td colspan="5"></td>
    <td>Peak</td>
    <td colspan="5"></td>
  </tr>
  <tr>
    <td colspan="4"></td>
    <td colspan="3">Middle</td>
    <td colspan="4"></td>
  </tr>
  <tr>
    <td colspan="3"></td>
    <td colspan="5">Base</td>
    <td colspan="3"></td>
  </tr>
</table>

6. Checkerboard Layout

A table resembling a checkerboard pattern.

<table border="1">
  <tr>
    <td></td>
    <td>Black</td>
    <td></td>
    <td>Black</td>
  </tr>
  <tr>
    <td>Black</td>
    <td></td>
    <td>Black</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>Black</td>
    <td></td>
    <td>Black</td>
  </tr>
  <tr>
    <td>Black</td>
    <td></td>
    <td>Black</td>
    <td></td>
  </tr>
</table>

7. Hourglass Layout

A table shaped like an hourglass.

<table border="1">
  <tr>
    <td></td>
    <td></td>
    <td>Top</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>Middle Left</td>
    <td></td>
    <td>Middle Right</td>
    <td></td>
  </tr>
  <tr>
    <td>Bottom Left</td>
    <td></td>
    <td></td>
    <td></td>
    <td>Bottom Right</td>
  </tr>
</table>

8. Wave Layout

A wavy pattern made by offsetting cells.

<table border="1">
  <tr>
    <td></td>
    <td>Wave</td>
    <td></td>
    <td>Wave</td>
  </tr>
  <tr>
    <td>Wave</td>
    <td></td>
    <td>Wave</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>Wave</td>
    <td></td>
    <td>Wave</td>
  </tr>
</table>

9. Tetris Block Table

Blocks arranged like a Tetris game.

<table border="1">
  <tr>
    <td rowspan="2"></td>
    <td rowspan="2">Block</td>
    <td></td>
    <td>Block</td>
  </tr>
  <tr>
    <td colspan="2">Block</td>
  </tr>
  <tr>
    <td colspan="3">Base</td>
  </tr>
</table>

10. Star Layout

A star-like pattern using colspan and rowspan.

<table border="1">
  <tr>
    <td colspan="2"></td>
    <td>Top</td>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td></td>
    <td>Left</td>
    <td></td>
    <td>Right</td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td>Bottom</td>
    <td colspan="2"></td>
  </tr>
</table>

11. Arrow Layout

An arrow shape pointing down.

<table border="1">
  <tr>
    <td colspan="3"></td>
    <td>Head</td>
    <td colspan="3"></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td>Body</td>
    <td></td>
    <td>Body</td>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td></td>
    <td>Tip</td>
    <td></td>
    <td></td>
    <td></td>
    <td>Tip</td>
    <td></td>
  </tr>
</table>

12. Bullseye Layout

A target-like pattern with concentric rows.

<table border="1">
  <tr>
    <td colspan="5"></td>
    <td>Outer</td>
    <td colspan="5"></td>
  </tr>
  <tr>
    <td colspan="3"></td>
    <td>Middle</td>
    <td></td>
    <td>Middle</td>
    <td colspan="3"></td>
  </tr>
  <tr>
    <td colspan="4"></td>
    <td>Center</td>
    <td colspan="4"></td>
  </tr>
</table>

13. Cross Layout

A table in the shape of a cross.

<table border="1">
  <tr>
    <td></td>
    <td></td>
    <td>Top</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td>Center</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Left</td>
    <td>Center</td>
    <td>Middle</td>
    <td>Center</td>
    <td>Right</td>
  </tr>
</table>

14. Maze Layout

A mini maze-like table structure.

<table border="1">
  <tr>
    <td>Start</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>Path</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td>Path</td>
    <td>End</td>
  </tr>
</table>

15. Fishbone Layout

A table in the shape of a fishbone.

<table border="1">
  <tr>
    <td></td>
    <td></td>
    <td>Head</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>Top Fin</td>
    <td>Body</td>
    <td>Bottom Fin</td>
    <td></td>
  </tr>
  <tr>
    <td>Tail</td>
    <td></td>
    <td>Body</td>
    <td></td>
    <td>Tail</td>
  </tr>
</table>

Demo

You can find the CodePen Demo of my experiment below.

Step-by-Step: Create Your Own Wild Table Layouts

Ready to dive in and whip up your own table masterpieces? Here’s a quick guide to get you going:

• Plan Your Layout: Jot down your design on paper or a digital tool. Figure out where to use rowspan and colspan.
• Start with a Basic Table: Kick things off with a simple setup using rows and for cells.
  • Play around with colspan and rowspan: Merge cells horizontally with colspan and vertically with rowspan.
  • Tweak Borders and Alignment: Borders make your design pop and help you see what's going on. Use align and valign attributes to position things.
  • Iterate and Refine: Adjust cell sizes, merge spots, and where you put content until everything looks just right.

Pro tip: Don’t shy away from experimenting! Tables are pretty forgiving when you want to try new things.

A Love Letter to Tables: Why They Still Matter

Tables might be out of sync with modern design, but they’re definitely not obsolete. Here’s why we should appreciate them:

• Simplicity: For small, structured layouts or quick prototypes, tables are unbeatable.
• Data Presentation: When it comes to organizing data—from financial reports to sports stats—tables reign supreme.
• Accessibility: Screen readers and assistive tech do a great job with tables, making sure everyone can access the info.
• Legacy Compatibility: Dealing with older systems? Tables are often your best bet.

To all those tables that have organized our info, structured our designs, and tested our patience: we salute you. ❤️