1. Introduction: Why is it unwise to use table layout?
The reason why tables exist in HTML is for one purpose only: to display table-like data. However, the subsequent border="0" allows designers to place images and text in this invisible grid. To date, tables still dominate the way visually rich websites are designed, but it hinders a better, more approachable, flexible, and powerful approach to website design.
2. Overview: What’s in it for me?
We’ll show you a way to work that will:
Make your pages load faster Reduce your traffic costs Let you modify the design More efficient and less expensive at the same time Help your entire site maintain visual consistency Make your site better found by search engines Make your site more useful to viewers and browsers Affinity When more and more people around the world adopt Web standards, it can also improve your competitiveness in the workplace (in fact, it reduces the risk of unemployment).
3. Problems caused by tables
Mix format data into your content. This makes the file size unnecessarily large, and users must download such format information once for each page they visit. Bandwidth is not free. This makes redesigning existing sites and content extremely labor-intensive (and expensive). This also makes it extremely difficult and expensive for us to maintain visual consistency across the entire site. Table-based pages also greatly reduce their accessibility to people with disabilities and viewers using mobile phones or PDAs.
4. Transitional design
Use margin and padding to replace redundant table cells and spacer GIFs.
Use link and @import to load styles. The former was used in early browsers, and the latter is for modern browsers.
5. Structured markup: What you write is what you think , write whatever you think
Even though writing CSS is very simple, using CSS for typesetting really requires a different way of thinking than we are used to.
What we consider when doing layout is not “put this thing here, put that thing there”, but the category of information on the page and the structure of the information.
We use
tags to mark the most important headlines; sub-level items are marked with
, and so on; paragraphs are placed in
tags.
This is what we call "structural markup" or "semantic markup".
Your content will no longer be placed inside tables and table elements, instead they will be placed in div elements. Also give your div elements an id or class, but this is to describe their content or functionality, not their appearance.
When you italicize an object, you probably want to either emphasize it or quote a title from a book, right? If it's the former, you should use ; if it's the latter, you actually have to use .
If an object is marked as bold, it should actually be marked as .
If you want to add a line break somewhere, this is probably to start a new beginning. If it's not the beginning, is it some kind of class (type) that appears in your site? In both cases above, you should replace with CSS.
.foo {display:block}
Consider the situation where the content you need to navigate is some unordered links:
Use the
tag to edit them .
link1 link2 link3 link4 link5 Horizontal navigation bar We can use CSS to control the appearance of this list on the web page.
By using display:inline we can create a horizontal navigation bar.
link1 link2 link3 link4 link5 This is the code used in the navigation bar above:
6. From playing with table tricks to following Web standards: consider everything
If you have divided the content of the site into categories, then it is time to analyze each page and break them down according to logical relationships.
Main navigation bar Sub-navigation bar
Header and footer
Content
Related information
Others
Note that the analysis consists of nested tables, white space separators and A table structure composed of border elements (because we want to replace them with a much simpler table structure organized using div tags).
Once you have analyzed the structure of the page, you can start to peel back the surface and analyze the places in your current page code that can be converted into structured markup.
Being a perfectionist, kill all tags and spacer GIFs! Likewise, get the and tags together. Remove appearance tags (bgcolor, background, etc.) from the table. Change CSS calls that are purely for appearance (such as ) into structured markup.
7. Change the tags that describe appearance to tags that describe structure
You can use "find and replace" (or regular expressions), but the best way is in the browser Open this page and copy and paste the text into your HTML editor.
The key is to think in a structured way! Simply replacing the tag with is not enough.
Which is the most important item? Mark it with
. For less important ones, use
, and so on. Use
to mark paragraphs. Mark the navigation bar as an unordered list.
Select a DOCTYPE to use. (We recommend XHTML transitional. Unless you are a master at this, don’t use XHTML strict.)
8. Distribute your pages reasonably in divs
Place your main navigation bar Place it in a div with the id attribute set to mainnav, and place the sub-navigation bar in a div with the id or class set to subnav. The footer looks like this:
