How to Make Web Page Columns the Same Length

Tables help you design your website layout.

A common web page design has columns on each side of the page. Columns are components of a table. Tables are web page elements that span across a page and format the width of each area. With tables, you can assign an equal column length that creates an attractive layout. Tables are simple HTML components, so no advanced HTML knowledge is required to design your website layout.

Instructions

1. Create a table element in your web page. A table element can take up a portion of your web page space, or you can make it the full width of the page. In this example, the table is created for a full right side and left side column. To create a table for your page, use the following code:
   <table width="100%">
   </table>
   The "100%" value for width causes the table to span the entire width of the page in the user's browser. You can also set a table to only cover a partial area of the page.

2. Create two table columns that are equal size. For this example, a left, middle and right column are created. The left and right columns are used for menus, and the middle column is used for the content of the page. The following code creates a right and left column of equal width:
   <table width="100%">
   <tr>
   <td width="25%"></td>
   <td width="50%"></td>
   <td width="25%"></td>
   </tr>
   </table>
   In this code, the columns on the left and right side are set as 25 percent of the total width of the table. The 50 percent designation is the center column used to add content to the pages.

3. Add content to the table columns. If the table columns are not populated, it will not show up in your pages. In this example, a left and right side text are entered. You can also fill your table with a space character ( ) to activate the cells. The following code is an example of a table with content added:
   <table width="100%">
   <tr>
   <td width="25%">Left navigation</td>
   <td width="50%">My page content</td>
   <td width="25%">Right navigation</td>
   </tr>
   </table>

4. Save your code changes and open your web page in a web browser. Notice the columns in the table are of equal width on the page.

References

• WDVL: Page Layout: Tables