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.