Access Keys:
Skip to content (Access Key - 0)

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.
    click edit tab

  2. Position the cursor where you want the table.
  3. Click the Table icon on the Formatting toolbar.
    click table icon

  4. Make adjustments to your table then click OK.
    table properties window

    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.
    table is inserted into content

  6. Paste text into the right cell.
    text is pasted into table

  7. Paste the image into the left cell.
    image is inserted into table

  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.
    image is cut off

  9. To access table properties, right click on the table cell with the image. Then click Cell, then Cell Properties.
    cell properties window

    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.
    set the cell width to 90
    And now the image fits.
    the image fits

See Also

IS&T Contributions

Documentation and information provided by IS&T staff members


Last Modified:

August 07, 2020

Get Help

Request help
from the Help Desk
Report a security incident
to the Security Team
Labels:
c-drupal-get-started c-drupal-get-started Delete
layout layout Delete
table table Delete
tables tables Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.
Feedback
This product/service is:
Easy to use
Average
Difficult to use

This article is:
Helpful
Inaccurate
Obsolete
Adaptavist Theme Builder (4.2.3) Powered by Atlassian Confluence 3.5.13, the Enterprise Wiki