How to Align Table Content in Columns and Rows in Dreamweaver

Clean alignment of elements in columns and rows makes your table neat and easy to read. Achieving that look in Dreamweaver can be tricky because you don’t have as much control in HTML as you have in a program such as Excel, where you can align numbers to the decimal point, for example. In an HTML table, you can align the content of columns to the left, right, or center.

The following steps explain the basics of aligning rows and columns in your table (and you find tips for solving common alignment problems, too):

  1. Select the column or row for which you want to change the alignment.

    Place the cursor in the first cell in the column or row you want to align; then, click and drag to highlight all the columns or rows that you want to change.

  2. Choose an alignment option from the Horz (horizontal) or Vert (vertical) drop-down lists in the Property inspector.

    The content of the cell adjusts to match the selected alignment option.

    Alternatively, you can access many formatting options, including alignment options, by selecting a table and then right-clicking (Windows) or Control-clicking (Mac).

    image0.jpg

If you follow the preceding steps but table contents still aren’t aligning, try the following tips:

  • If you use the same number of digits after the decimal point in all your numbers, you can get them to line up in a column. For example, if one price is $12.99 and another is $14, express the latter as $14.00; then, when you right align, the numbers line up. (If your columns still aren’t lining up the way you want them to, consider using a monospace font).

  • If you're having trouble aligning the contents of adjacent cells, set the vertical alignment to Top. A common frustration occurs when you have two or more rows side by side with text in one and images in the other, and you want the top of the image and the top of the text to line up. Often they don't line up because they’re different lengths.

    The solution is simple: Select all the cells you want to align, and in the Property inspector, change the vertical alignment to Top. Seemingly like magic, all the content jumps to the top of the cells and lines up perfectly. This is such a common problem that you can routinely set the vertical alignment of table cells to Top.

  • Make sure you use the same formatting, paragraph, and break tags if you want the contents of adjacent cells to line up. Another situation in which the contents of adjacent cells don’t line up properly occurs when you include paragraph tags around the text or an image in one cell but not in another.

    Use Split view (by clicking on the Split button at the top of the workspace) and make sure that the code in both cells matches. If you have <p> tags around the contents in one cell and not in another, make sure to include them in the second cell or remove them from the first so that both cells match.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com