Creating Tables

Tables in HTML are very similar to tables in a spreadsheet. They contain rows and columns where you can place data. But in HTML tables are also a way to design your pages with some control over placement of text and graphics.

In Dreamweaver you can either use Standard view, builds and views tables in the conventional manner, or Layout view, allows you to create cells in the document and builds the table around them. In Standard view, you see all the rows and columns, but in Layout view, you just see the cells that contain your data (content). Both views are accessible from the Common Objects panel or from View>Table View>Layout or Standard View on the tool bar.

To design in Layout View:

Notes: Layout View is for designing the layout of your pages. Pages already containing content not contained within layout cells cannot have layout cells added to them later. If you want to use layout cells (and you will), choose the layout view initially and insert your cells as you need them. Layout Tables are for designing a grid for placement of cells. The table itself cannot accept text or images. Text or images must be inserted into cells that you add to the table.

To insert a layout cell or layout table:

1. Choose Layout View using the icon in the Common Objects panel or from View>Table View>Layout View on the tool bar. A Getting Started in Layout View dialog box appears summarizing the view types and offering access to Help with tables.
2. Position the insertion point in your new document.
3. From the Common Objects panel, choose Draw Layout Cell to draw individual cells or Draw Layout Table to draw an entire group of cells, a table. The pointer changes to crosshairs.
4. Position the crosshairs in your document.
5. Click and drag to draw a single cell if you chose Draw Layout Cell or a divisible cell if you chose Draw Layout Table.
6. Use Draw Layout Cell to divide the divisible cell into smaller cells in the table or to add more cells to your page. You can even insert a table within a table cell by positioning your insertion point within a cell, choosing Draw Layout Table, and dragging the crosshairs to form the table.

   To resize or adjust content alignment:

Cells and tables can be resized by clicking on the table or cell walls and grabbing and dragging on a handle. Cells can be moved by activating the cell (wall turns red) and click and dragging it to the new position.

Cell backgrounds, spacing, and dimensions can be fine tuned with the tools provided in the Property Inspector. Select Autostretch to allow cell to adjust to fit their content. Adjusting the position of elements within cells is accomplished by selecting the element and using the Property Inspector tools.

Creating tables in Standard Layout View:

Note: Tables can be added to documents at any time in Standard Layout View.

To insert a table:

1. Choose Standard View from the Common Objects panel or from View>Table View>Standard View on the tool bar.
2. Position the insertion point in your document.
3. Choose Insert Table from the Common Objects panel or from Insert>Table on the tool bar. The Insert Table dialog box appears.
4. Set the parameters (rows, columns, height, width, etc.) and click OK.

   To resize, adjust alignment, or add elements to a table:

The size of the cells and table can be adjusted by clicking on the cell or table walls (walls turn red) and dragging the handles. The table can be moved by activating the table and clicking and dragging the crossed arrows to the new position. Adjusting the position of elements in your table is accomplished by selecting the content and using the Property Inspector tools.