search
HomeWeb Front-endCSS TutorialComparison of the advantages and disadvantages of transitioning from Table to CSS_Experience exchange

The voices of CSS layout advocates are being overshadowed by the "merits of table layout" voices. It's a myth that CSS is difficult to learn. In fact, CSS is no more difficult than other web technologies. Here's the problem: Web designers who are already quite experienced with table design have to completely abandon their mindset and adopt a CSS approach.

I have designed with table layouts for many years, and when I first started using CSS layouts, I also encountered problems. "How easy it is to use forms" I thought. But that's just because I'm used to tables and I know how to deal with them cleverly. Any change, even a small one, would be troublesome to me, let alone such a drastic change.

Recalling the first time I learned to use table layout, there were also a lot of problems plaguing me. Think back to those rowspans, colspans and blank GIF images. To be fair, of these two layout methods, table layout is more difficult.

Another old point of view is: the page (number of bytes) designed by CSS is very large, larger than the page designed by table. The reason is: because you put all the styles of the entire site in one file, when a user visits a page, the style sheet containing the styles of the entire site needs to be downloaded, so the page is very large.

So why do you put all styles in one CSS file? No one limits you to using only one CSS file. You can set up a separate sub-style sheet file for the detailed styles of certain chapters. In my experience, from simple manual websites to large database-driven, multi-functional system websites, I have never used only a single style sheet file, and no homepage has more code than a table design. Those table, tr, and td tags take up a lot of space. Take action now and use CSS layout methods to slash your file size.

When you use table layout, you lose the semantic meaning of the label itself. Web standard approach to layout will bring huge benefits by separating the content and presentation layers. When you lock your design with a table, once you need to change it, you have to find the page, then analyze the table structure, and modify it page by page, while the CSS file can simply change the design of the entire site. With CSS you don't have to think about device independence at all, and you don't have to worry about users choosing their own styles.

I also heard about the "benefits" of a form: designing forms. But forms can use any method to achieve table arrangement. Is it for Netscape 4? I've never heard of a reason to support such an old browser. The interests of users of most mainstream browsers are far greater than the interests of the few users who use browsers that do not support style sheets (not to mention that CSS also supports plain text).

The argument of those "Super Forms" proponents boils down to this: "Forms are easier." That's bullshit! If you're content with an inefficient approach, that's up to you. If you want to break through the limitations and make the page content more versatile, easier to use, and have less code, then work hard to change. Of course, if you are new to web design and starting from scratch, you will not have these problems.

"Don't push the car, just push it", "This is just a tool in the designer's toolbox." This is the view of some discussants.Table layout is like an old-fashioned wood-handled screwdriver that you can still use to drill into a wall. And I would rather use an electric screwdriver. CSS layout is more efficient and won't give me blisters on my hands.

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Demystifying Screen Readers: Accessible Forms & Best PracticesDemystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Create a JavaScript Contact Form With the Smart Forms FrameworkCreate a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AM

This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.

Adding Box Shadows to WordPress Blocks and ElementsAdding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Working With GraphQL CachingWorking With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte TransitionMaking Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Show, Don't TellShow, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

Classy and Cool Custom CSS Scrollbars: A ShowcaseClassy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AM

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand

What the Heck Are npm Commands?What the Heck Are npm Commands?Mar 15, 2025 am 11:36 AM

npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Hot Tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft