Is Your Website Built With 2000s Table Layouts?

If your website was built in the 2000s and still looks almost the same, there is a good chance it uses table layouts. It may have worked well for years on office computers. On today's phones it looks tiny, cramped or broken, and that costs you visitors every day.

What a table layout is

HTML tables were made for data, such as a price list or a timetable. Before modern CSS was widely supported, designers used them for something else: an invisible grid that held the logo, the menu, the main text and the sidebar in fixed positions. Often the whole page sat inside one table exactly 760 or 800 pixels wide.

MDN, the reference many web developers use, puts it simply: modern browsers have solid CSS support, so table-based layouts are no longer needed.

How to spot it in two minutes

1. Narrow the window. On a computer, make the browser window very narrow. A modern site rearranges itself into one column. A table layout stays the same width and a scroll bar appears along the bottom.
2. View the source. Right-click the page and choose View page source, then search for <table. Many matches, especially with width="760", cellpadding or bgcolor, point to a table layout.
3. Look for other signs of age: <font> and <center> tags, images called spacer.gif, menus made of image buttons, text saved inside pictures, and file names ending in .htm or .asp with no recent updates.
4. Open it on your phone. If the whole desktop page appears shrunk to fit, and you must pinch and zoom to read anything, the layout is not responsive.

A table used for a real price list or opening hours is fine. The problem is tables used for the whole page structure.

Why it breaks on phones

• Columns cannot stack. A table keeps its cells side by side. On a narrow screen the sidebar and main text squeeze together or push past the edge, instead of moving one under the other.
• Fixed widths do not shrink. A page fixed at 800 pixels is wider than any phone held upright, so visitors scroll sideways.
• Adding a viewport tag can make it worse. The tag tells phones to use their real width, but the table still wants 800 pixels, so parts of the page get cut off.
• Tiny tap targets. Menus built for a mouse pointer are hard to hit with a thumb.

Why it matters beyond looks

Google crawls and ranks sites using their smartphone version, under what it calls mobile-first indexing. A page that is hard to use on a phone gives Google a weak version of your business. Layout tables can also confuse screen readers, which announce rows and columns that mean nothing to the listener. And a site this old often runs on server software that stopped getting security updates years ago.

Your options, from smallest to biggest

1. Patch it with CSS

A developer can add CSS rules that make table cells stack on small screens. On a very simple site of a few pages, this can buy time. On most sites the result is fragile: every page needs testing, and images, menus and fixed widths still cause trouble.

2. Move the content into a modern theme or builder

Your text and photos go into a responsive theme on a current system such as WordPress, or a hosted website builder. This suits sites with simple needs and an owner who wants to edit pages themselves.

3. Rebuild with a modern layout

A new site built mobile-first with CSS Grid and Flexbox adapts to any screen. It is usually faster, easier to update and better for search. For most table-layout sites, this is the option that gives the best result for the money.

A quick checklist before you decide

• How many pages does the site really need? Old sites often carry many pages nobody visits.
• Which pages bring visitors? Search Console shows this for free.
• Who owns the domain and hosting logins? Find them before any work starts.
• What must the new site do: calls, bookings, forms, a shop?

For more on phone problems, read what phone visitors see on a site that is not mobile-friendly.