logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods
Crafts for Kids


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

HTML Fundamentals - Layout Elements

Guest Author - Elizabeth Connick

If you've been through the other components of the HTML Fundamentals series you know how to format text, add images and create links. The next step is to learn how to assemble these pieces on the web page to get the look you want.

Many HTML elements exist to help format various portions of the page; we'll focus on the two that are used most frequently to lay out page sections. The two primary layout elements are the table and the div.

Tables have been used since the inception of HTML to place elements in relation to each other. The HTML table was originally intended for use in displaying data and so on, much like an Excel spreadsheet. However, web designers quickly realized that they could use tables to position images and text in more sophisticated layouts than the use of <CENTER> tags and other design HTML elements would allow.

The HTML table contains rows (indicated by the <TR></TR> tags) and these rows contain columns (indicated by the <TD></TD> tags). Most tables will have multiple rows and columns to aid in element positioning. The code for a basic table looks something like this:

<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>

The above code sample would build a one row, one column table. You can use multiple rows and columns to produce a more complicated table for use in positioning text and images. A table with multiple rows and columns looks like this:











By placing text and images in the appropriate rows and columns, you can position these elements as desired around your web page. Tables can be visible, as in the above example, if you set the border to "1" or more. Setting 'border="0"' builds an invisible table. Many web pages consist of nested invisible tables, with one large table holding the major page sections (such as menus) and smaller tables inside which lay out the main portion of the page.

With the inclusion of CSS (Cascading Style Sheets), the div element came into its own as a layout element. Designers can now use CSS to place divs in specific locations around the page, with even more precise results than tables can achieve. For example, a designer might use the following div tag to place an image in the center of the web page:

<DIV STYLE="margin-left: 200px; margin-top: 200px;>
<IMG SRC="image.jpg">
</DIV>

Many designers are phasing out tables in favor of divs. All things being equal, it is better coding practice to use divs and CSS for layout rather than depending on tables. Tables were not designed for use as a layout tool, and using nested tables will make it difficult for accessibility software (such as the talking interfaces used by the blind) to understand your website. On the other hand, it's possible to go too far in the other direction. If you are using ten nested divs to accomplish a layout that you could use one table to build, you are probably better off with the table.
This site needs an editor - click to learn more!

Add HTML+Fundamentals+%2D+Layout+Elements to Twitter Add HTML+Fundamentals+%2D+Layout+Elements to Facebook Add HTML+Fundamentals+%2D+Layout+Elements to MySpace Add HTML+Fundamentals+%2D+Layout+Elements to Del.icio.us Digg HTML+Fundamentals+%2D+Layout+Elements Add HTML+Fundamentals+%2D+Layout+Elements to Yahoo My Web Add HTML+Fundamentals+%2D+Layout+Elements to Google Bookmarks Add HTML+Fundamentals+%2D+Layout+Elements to Stumbleupon Add HTML+Fundamentals+%2D+Layout+Elements to Reddit




HTML Fundamentals - Links and Anchors
HTML Fundamentals Displaying Images
How to Add Cascading Style Sheets to Your Site
RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor