Design with tables

Question

I am developing websites without tables right now. the problem is that it can take a very long time to complete a site. People who design tables can finish much faster. What is a good tutorial or related way to do this?

I know that this is wrong, but I noticed that many customers really do not care, and they want their site to be as soon as possible. making it a div path, depending on the site, can take all the time.

PS: I tried to create a website, say Photoshop or Illustrator, and then exported the design as a web page, but when it comes to changing the design, I can’t wrap my head around the site to display correctly .. and usually I get angry and started to code it manually. I find coding hands much easier than anything else. I think this is a bad habit or maybe. I take more time on this, thinking.

Answer 1

The desktop layout is extremely simple, at least conceptually. The table starts with <table> and ends with </table> . Inside you have zero or more rows ( <tr>...</tr> ) inside which you have zero or more columns ( <td>...</td> ). There are a few more tags ( thead / tbody / tfoot , th for header cells), but that's really all you need to know about tables - no tutorial required.

Key benefits for the table:

• Table size is customizable based on content size
• Columns are always lined up, simplifying linear content up vertically.
• Simple code - a few lines of HTML is all that is needed for the basic structure
• Universal support - the table will look right and work correctly in old / strange browsers (I look at you, IE!)

Disadvantages of tables include the status of “this is complex” status with div and CSS, not to mention the contempt of your peers. Tables are not a complete replacement for div and CSS, but don't let anyone tell you that div and CSS are also full replacements for tables.

When trying to style a table, there are a few things you can play with to look the way you want:

• border - this defines the border around and between table cells
• padding is the number of padding between the content and the edges of the cell
• text-align - horizontal alignment of content inside a cell
• vertical-align - vertical alignment of contents inside the cell (useful for vertical centering!)
• border-collapse - you can collapse the border to remove any distance between cells

Answer 2

W3Schools has a pretty good tutorial here:

http://www.w3schools.com/html/html_tables.asp

You might want to spend time exploring the use of DIV, CSS, etc., since exporting a website from Photoshop and Illustrator will only give you headaches when you need to make small adjustments. (Along with many other scenarios.)

Answer 3

If you use tables, you will have much more headaches if you try to do some fancy DHTML. Table elements are not block elements, they are not window elements, they are tables.

If you only have a static HTML site without javascript, then your problems are not so serious, however one point of the table is less than the design - it is to separate the design and structure. What is worth it to learn css.

For example, forget only the advantages and disadvantages of headaches that you need to track down the table design when you want to make adjustments later by adding all the design rules to the css file, reducing subsequent downloads for clients, since your css will be cached even if your layout pages are generated dynamically through PHP. This speeds up the loading of your site.

And anyway, many developers can create css tables without layouts, as fast other people create some ugly tables + spacer.gif.

Answer 4

No question, where is the tutorial for div layout? I just read a book on website accessibility, which talks about the preference for div layout in fairly strong conditions.

Answer 5

Your argument is correct, coding a site using tables is much faster with a line. The problem with tables is that they are much more difficult to maintain in the long run. Using divs, you will have a much simpler time when changing the style or layout in the future.

If the site you create requires (very) almost no future maintenance, then the tables will probably be better / faster. However, if you plan to make changes to the design / layout of sites in the future (even just the average number of changes / fixes), div-centric design will be much more useful.

Answer 6

Many tutorials are available on the Internet, but I will answer another question with my answer.

Do you create these pages to do something right or do you create them for business purposes?

If the first, by all means, learn as much as you can about decisions like CSS. You should do this anyway, but do not let it interfere with delivery.

If the latter, I doubt that the client cares about how the "clean" code stands behind it, if it looks normal. Their main concern will be speed of delivery and good rendering on all major browsers.

This is the reason why I still use layout tables for the things that I deliver to customers. I also test it on only three browsers (I will not say that), since all my clients care. They really don't care if Opera works on the iPhone (for example) correctly, as that is not their target market.

Answer 7

I may be Luddite , but I see nothing wrong with using a table for page layout. It works all over the place, and as you said, users rightfully don't really care. Notice that I said a table; multiple nested table sites are a maintenance nightmare. And just because you use a table for a wireframe does not mean that you should not make extensive use of CSS to style it and the rest of your site.

Answer 8

You can get the best of both worlds using the correct HTML markup and then CSS using the different values ​​associated with the display property table .

Regarding the use of tables in HTML, this is what the W3C says (see Tables in HTML docs ):

Tables should not be used solely as they mean the layout of the contents of a document as this may present problems when rendering to non-visual media. In addition, when used with graphics, these tables can cause users to scroll horizontally to view the table on a system with a large display. To minimize these problems, authors should use style sheets to control layout, not tables.

Steve

Answer 9

If you like tables, know the tables and they don’t do you wrong, then stick with them, but the “go div” can be quite liberating. You need to at least understand the positioning, and I did not find a better tutorial than the following to teach you how to place divs

http://www.barelyfitz.com/screencast/html-training/css/positioning

Answer 10

the best training site I know is htmldog , which, despite the name, is mainly related to css.

Also, two invaluable sites for replicating tables, for example, using a div, are as follows:

• Faux columns (to create divs equal height
• This site that will create the basic cross browser html and css page layout for you: http://fu2k.org/alex/css/onetruelayout/example/interactive

Stick with divs - as you get used to it, it will become second nature, perhaps even faster than tables

Answer 11

When creating an HTML web page, the creation of a table on the page was declared inside the body of the content, since this table can be declared <table> and ends </table> , then the table header <theader></theader> then the rows were initialized <tr>content</tr> tabular data is inserted using the <td>content</td> table border and font width of the css style font style.