Is there a better layout than ?

When laying out a page, what are the alternatives to <table>? I've read in various places that tables weren't good for trying to layout pages. What should I use? <div>?

<table align="center" width="100%" height="250"> <tr> <td align="left" width="25%"><?php require_once("page1.php"); ?></td> <td align="left" width="25%"><?php require_once("page2.php"); ?></td> <td align="left" width="25%"><?php require_once("page3.php"); ?></td> <td align="left" width="25%"><?php require_once("page4.php"); ?></td> </tr> </table>

-------------Problems Reply------------

Check out a css grid system:

In a semantic, tableless layout, that code you posted would look something like this:

HTML:

<div class="wrapper">
<div><?php require_once("page1.php");?></div>
<div><?php require_once("page1.php");?></div>
<div><?php require_once("page1.php");?></div>
<div><?php require_once("page1.php");?></div>
</div>

CSS:

.wrapper { overflow-y:auto;}
.wrapper div { float:left;width:25%;}

Try using CSS - it's faster and more reliable. There is a good article about this topic on A List Apart.

<div>
<ul>
<li><?php require_once("page1.php");?></li>
<li><?php require_once("page1.php");?></li>
<li><?php require_once("page1.php");?></li>
<li><?php require_once("page1.php");?></li>
</ul>
</div>

Is there a better layout than <table>?

The question should be: Is there a worse layout than tables?

<div class="container">
<div><?php require_once("page1.php"); ?></div>
<div><?php require_once("page2.php"); ?></div>
<div><?php require_once("page3.php"); ?></div>
<div><?php require_once("page4.php"); ?></div>
</div>

.container { width: 100%; overflow: hidden; }
.container > div { float: left; width: 25%; }

Check out the demo.

Please note the overflow: hidden; trick on the container. This is because the inner divs have float: left;. When using float the container doesn't know the dimensions of the content. Because the divs are taken out of the normal flow of the document.

You should only use tables for tabular content NOT for layout purposes.

Rendering tables is slower than rendering divs. Tables are also less flexible. Also tables aren't semantically correct. (Well... divs aren't really sementic but hey it beats tables)

Another thing:

Please use CSS and keep you CSS separated from display logic.

Category:html Views:0 Time:2011-12-26
Tags: html

Related post

  • Is there a business reason for striving for pure CSS layout? 2008-08-07

    It seems like every time I try to create a pure CSS layout it takes me much longer than if I'd use a table or two. Getting three columns to be equal lengths with different amounts of data seems to require particular fancy hacks, especially when deali

  • Visual Studio 2008 Window layout annoyance 2008-08-13

    I'm having a weird issue with Visual Studio 2008. Every time I fire it up, the solution explorer is about an inch wide. It's like it can't remember it's layout settings. Every un-docked window is in the position I place it. But if I dock a window, it

  • Repository layout for large Maven projects 2008-08-21

    I have a large application (~50 modules) using a structure similar to the following: Application Communication modules Color communication module SSN communication module etc. communication module Router module Service modules Voting service module W

  • 100% Min Height CSS layout 2008-08-24

    What's the best way to make an element of 100% minimum height across a wide range of browsers ? In particular if you have a layout with a header and footer of fixed height how do you make the middle content part fill 100% of the space in between with

  • How do I REALLY reset the Visual Studio window layout? 2008-08-25

    I had a plugin installed in Visual Studio 2008, and it created some extra dockable windows. I have uninstalled it, and I can't get rid of the windows it created - I close them, but they always come back. They're just empty windows now, since the plug

  • Install Python to match directory layout in OS X 10.5 2008-08-27

    The default Python install on OS X 10.5 is 2.5.1 with a fat 32 bit (Intel and PPC) client. I want to setup apache and mysql to run django. In the past I have run apache and mysql to match this install in 32 bit mode (even stripping out the 64 bit stu

  • Fixed page layout in IE6 2008-08-27

    Header, footer and sidebars have fixed position. In the center a content area with both scroll bars. No outer scroll bars on the browser. I have a layout that works in IE7 and FF. I need to add IE6 support. How can I make this work? Here is an approx

  • Project design / FS layout for large django projects 2008-09-04

    What is the best way to layout a large django project? The tutorials provide simple instructions for setting up apps, models, and views, but there is less information about how apps and projects should be broken down, how much sharing is allowable/ne

  • What is a good repository layout for releases and projects in Subversion? 2008-09-08

    We have the standard Subversion trunk/branches/tags layout. We have several branches for medium- and long-term projects, but none so far for a release. This is approaching fast. Should we: Mix release branches and project branches together? Create a

  • HTML layout for winforms 2008-09-08

    Instead of arranging controls on a winform form by specifying pixel locations, I'd like to lay it out similar to the way you'd layout a form in html. This would make it scale better (for larger fonts etc). Does anyone know of a layout library that al

  • Directory layout for pure Ruby project 2008-09-11

    I'm starting to learn ruby. I'm also a day-to-day C++ dev. For C++ projects I usually go with following dir structure / -/bin <- built binaries -/build <- build time temporary object (eg. .obj, cmake intermediates) -/doc <- manuals and/or Do

  • Are liquid layouts still relevant? 2008-09-15

    Now that most of the major browsers support full page zoom (at present, the only notable exception being Google Chrome), are liquid or elastic layouts no longer needed? Is the relative pain of building liquid/elastic layouts worth the effort? Are the

  • Whats a liquid layout? 2008-09-15

    My designer keeps throwing out the term "liquid" layout. What does this mean? Thanks for the clarification, I have always just called this a percentage layout, and thought he was saying that the pieces could be moved around, and that was liquid -----

  • Best keyboard for custom Dvorak-based programming layout 2008-09-15

    I'm considering switching to a Dvorak-based keyboard layout, but one optimized for programming (mostly) Java and python (e.g. DDvorak, Programmer Dvorak, etc.). What particular keyboard would be best for such an undertaking? I'd consider either natur

  • What is the VTable Layout and VTable Pointer Location in C++ Objects in GCC 3.x and 4.x? 2008-09-16

    I am looking for details of the VTable structure, order and contents, and the location of the vtable pointers within objects. Ideally, this will cover single inheritance, multiple inheritance, and virtual inheritance. References to external documenta

  • Converting Table Layout To Div 2008-09-18

    I'm implementing a comment control that uses an ASP.Repeater to display each comment. The comment itself is currently displayed using a table to divide up some images to display the comment in a bubble. I know that tables are supposed to be the epito

  • What is the reasoning behind the recommended layout for Subversion repositories? 2008-09-20

    Version Control with Subversion recommends the following layout for (single-project) repositories (complemented by this question): /trunk /tags /rel.1 (approximately) ... /branches /rel1fixes What are the relative merits of this arrangement when comp

  • Testing rendering of a given layout with RSpec & Rails 2008-09-20

    Is it possible to test the use of a given layout using RSpec with Rails, for example I'd like a matcher that does the following: response.should use_layout('my_layout_name') I found a use_layout matcher when Googling but it doesn't work as neither th

  • How would you achieve this table based layout using CSS instead of HTML tables? 2008-09-20

    I want the following layout to appear on the screen: FieldName 1 [Field input 1] FieldName 2 is longer [Field input 2] . . . . FieldName N [Field input N] Requirements: Field names and field inputs must align on the left edges Both columns must dynam

  • Directory Layout for Erlang Services? 2008-09-23

    In our Java applications we typically use the maven conventions (docs, src/java, test, etc.). For Perl we follow similar conventions only using a top level 'lib' which is easy to add to Perl's @INC. I'm about to embark on creating a service written i

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.130 (s). 11 q(s)