Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development

  • Print
  • + Share This
  • 💬 Discuss

Using HTML tables for page layout

Now you will discover how to use HTML tables. Tables are useful for organizing large amounts of data, and can be used for traditional layouts.

First you will open an existing page to see the final Web page.

  1. Choose File > Open.
  2. Browse to the Lesson03 folder, and select the table_finish.html page. Select Open.

    A page created with an HTML table appears. Notice the page layout was created by a number of cells organized in rows and columns.

  3. You can leave this page open for reference, or choose File > Close.
  4. Make sure that you still have your student.site window open from earlier in this lesson. If you do not, choose File > Open Recent and select student.site, or choose File > Open > Lesson03 > student.site.

Placing a table on your page

To start the next page, you will open an existing page on which to build your table.

  1. Choose File > Open. Select the file named table_start.html in the Lesson03 folder and click Open.
  2. Choose File > Save As. Type table1 for the file name.
  3. Click on the Site Folder button (sitefolder.jpg) at the bottom of the Save As window and choose Root (Windows) or Root folder (Mac OS) from the drop-down menu. This directs you to the web-content folder of the student.site. Press Save.
  4. Make sure the Objects palette is open and the Basic Objects are visible. If the Objects palette is not visible, choose Window > Objects.
  5. Select the Table Object (tableobject.jpg) and drag it to the page. A default table appears on your page and the Inspector is now a Table Inspector. The Table tab of the Inspector should be forward.
  6. In the Table Inspector, change the Rows text field to 4 and the Columns text field to 2.
  7. In the Table Inspector, select the Width drop-down menu and select Pixel. Enter 600 into the Width text field. In the Height drop-down menu leave the height at Auto. Press Enter.

Adjusting cell size

As a default, table cells are set to automatically adjust as you add content or text to the individual cells. To fix the size, you will assign a pixel dimension to all the cells at one time. The dimensions can be changed later.

  1. Using the Standard Editing tool (editing.jpg), click inside the top left cell. The blinking cursor appears.
  2. Ctrl+Enter (Windows and Mac OS) to select the top left cell, not the text area inside. The cell becomes highlighted with a dark border.
  3. Select the Cell tab of the Table Inspector and select the Width drop-down menu; change it from Auto to Pixel. Then type in the value of 145.
  4. Using the Standard Editing tool, click in the top right cell. Choose Special > Table > Select Cell to select the cell.
  5. In the Cell tab of the Table Inspector, change the Width drop-down menu from Auto to Pixel, then type the value 441.
  6. Choose File > Save.
  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus