WebExpress 0.0.10-alpha – From Table-Based Layouts to Modern Container Design

When I look back today at my first steps in web development, I see one thing above all: tables. Back then, tables were my universal tool for structuring websites. No matter whether it was about arranging text, images, or navigation elements, I put everything into tables. Every row and every column was a building block of my layout. It was a time when people believed that tables gave them control over the design. But with experience and the progress of web technologies, I realized that tables are not only impractical for layout purposes but also limiting. Today, I try to avoid tables wherever possible and instead rely on container-based layouts. Even in cases where tables are needed in the traditional sense, such as for displaying tabular data, I use modern grid techniques that go far beyond old HTML tables. In this blog post, I want to describe my journey, explain the advantages of container-based layouts, and critically examine why tables are no longer a good choice for designing websites.

In the early 2000s, it was almost standard practice to build websites with tables. CSS existed, but it was nowhere near as advanced as it is today. Flexbox, Grid, and modern positioning techniques did not exist yet. Anyone who wanted to structure a page used the <table> element. I remember projects where I built nested tables across multiple levels to achieve a specific layout. Navigation on the left, content on the right, a header at the top, and a footer at the bottom. Everything was placed inside table cells. It worked in some way, but it was neither elegant nor sustainable.

The problem was not only the complexity but also the lack of flexibility. Tables are meant for data, not for layouts. They enforce a rigid structure that adapts poorly to different screen sizes. Responsive design was nearly impossible with tables. Anyone viewing a page on a smaller screen often had to deal with horizontal scrolling. On top of that, the code was difficult to maintain. Deeply nested tables made it almost impossible to keep track of the structure. Changing the layout often meant rethinking the entire page from scratch.

With the evolution of CSS, a new world opened up. Suddenly, it became possible to position elements independently, define spacing, style backgrounds, and build layouts more flexibly. Containers became the central building block of modern websites. Instead of squeezing content into table cells, you could place it into semantically meaningful containers such as <div> elements or later semantic tags like <header>, <nav>, <main>, and <footer>.

The major advantage is that containers are flexible. You can style them freely with CSS, move them, scale them, and combine them. You can place them next to each other, stack them, or make them respond dynamically to different screen sizes. This was the beginning of responsive design, which is taken for granted today. Containers make it possible to build layouts that automatically adapt to smartphones, tablets, and desktop screens. Two techniques are especially important: Flexbox and CSS Grid.

Flexbox is excellent for one or two dimensional layouts where elements need to be arranged flexibly next to or below each other. With properties such as justify-content, align-items, or flex-grow, you can distribute and align elements dynamically. Flexbox is ideal for navigation bars, buttons, or smaller layout sections.

CSS Grid goes even further. It enables the creation of complex two dimensional layouts with rows and columns without using tables. Grid is semantically clean, flexible, and extremely powerful. You can define areas that adjust automatically and build layouts that were once only possible with deeply nested tables. For me, Grid is the modern answer to the old table layout. It offers the same ability to arrange content in a grid but without the disadvantages of tables.

Even in cases where tables are needed in the traditional sense, such as for displaying data, I now prefer CSS Grid. Of course, the <table> element still exists and has its purpose. But often it is more practical to present data with Grid because it gives you more control over the layout. You can define column widths flexibly, align content more precisely, and adjust the design without being tied to the rigid structure of HTML tables. Grid allows you to present data in a visually appealing way while taking advantage of modern CSS techniques.

The shift from tables to containers shows how important modularity and flexibility are in web development. These principles also shape WebExpress. If you would like to contribute to a modern, modular, and lightweight framework, you are warmly invited to get involved. Bring in your ideas, improve existing components, or develop new features. Every contribution helps move WebExpress forward.