Adjusting Your Layout Using Tables

Adding a Table to Your Content Page

You may wish to create columns within the main content area for example, to place an image next to some text. Developers will do this using div tags in the HTML code. A simple way to accomplish this is with tables though there is less flexibility for formatting.

The table feature is available when you are using the Full HTML format (see Text Formats in the article Adding Text to a Drupal Cloud Site at the Drupal Cloud Home Page).

1. Click the Edit tab on your page.
   
   
   
2. Position the cursor where you want the table.
3. Click the Table icon on the Formatting toolbar.
   
   
   
4. Make adjustments to your table then click OK.
   
   
   
   1. For a single row with two side by side cells enter 1 for Rows and 2 for Columns.
   2. Leave the Width empty. The table will adjust based on the content. This makes Drupal's responsive design more precise.
   3. For a nice look, remove the Cell spacing and set the Cell padding to 5. Cell spacing is important to be able see the cell area to move content into it.
   4. Leave the Border at 1.
      
      
5. The table is inserted.
   
   
   
6. Paste text into the right cell.
   
   
   
7. Paste the image into the left cell.
   
   
   
8. When you save and view your changes you will notice the cell with the image is too small. The image is cut off. The cell needs to be wider.
   
   
   
9. To access table properties, right click on the table cell with the image. Then click Cell, then Cell Properties.
   
   
   Notice that a right click will give you access to all formatting and structural options for cells, rows, columns and the entire table.
   
   
10. Here the Cell width has been set to 90 pixels. The image width is 78 pixels. The cell padding is 5 pixels on the right and the left. That's 88 pixels. 90 pixels was entered to leave a small margin of error.
    
    And now the image fits.
    
    

See Also

• Return to Drupal Cloud Landing Page