How to Make a Row Smaller in Dreamweaver

Tables let you control the layout of Web page elements or data with a grid of vertical columns and horizontal rows. The default row height accommodates the height of a single line of text, but for design purposes, you might want this height smaller. However, Dreamweaver adds a non-breaking space in each cell, which prevents the row height from displaying smaller even if you manually specify a smaller size. To shrink the row, you have to remove these spaces within the HTML code. The row width is dependent on the width of the table, which is easily changed in the table properties.

Instructions

    • 1

      Open your HTML page in Adobe Dreamweaver.

    • 2

      Click "Split" at the top left of the Dreamweaver window to display both Design View and Code View modes side by side.

    • 3

      Click the bottom edge of the table to select it from the right Design View pane.

    • 4

      Enter the pixel width of the table in the "W" field of the bottom Properties pane. Choose a smaller value than is currently displayed to make the row width smaller. If you cannot see the Properties page, click "Window" and select "Properties."

    • 5

      Click the left edge of the table, immediately next to the row whose height you wish to shrink. This selects the entire row, which also highlights the row in the left Code View pane.

    • 6

      Enter a pixel height for the row in the "W" field of the Properties pane. If the row doesn't shrink to your preferred size and nothing is currently visible in any of the row cells, a non-breaking space is preventing it from shrinking.

    • 7

      Delete each instance of "&nbsp;" in the highlighted area of the Code view. These appear between the ">" and "</td>" codes.

    • 8

      Click anywhere in the Design View pane to see the new shrunken row.

Related Searches:

References

Comments

Related Ads

Featured