Cleverly format tables with Dreamweaver mx

Source: Internet
Author: User
Tags format modify dreamweaver
Dreamweaver table made good, content also has, how to look awkward ah! Oh, there is no form of make-up-format the table, as the saying goes: People rely on clothes also rely on the saddle, to make you make the Web page beautiful, elegant, there is a long way to go!

   Formatting a table
Table formatting mainly includes the table alignment, spacing and margin adjustment, border settings and background settings. Most of the work can be done through the table's property panel, as shown in the figure.

Aligning: When you select a table, you can align the table in the page by align (alignment) in the Property Panel: center, left or right, if you want to make the form to go where to go, do not want to go where not to go, but also have to think of another way:
1, put the table into the layer;
2, the table nested table.
Cellpad (Margins) and cellspace (spacing): Figuring out two concepts is key: A margin is the distance between the text in a cell and the border of a cell, and spacing refers to the distance between cells, as shown in the figure, where the units are pixels, by default, the table is displayed with a spacing of 2, and a margin 1 setting.

Table border: You can set the color and width, and the default value in the Border field is 1. Increase the number of borders to increase the width of the border, forming a solid border, if you enter a value of "0", the page is not displayed when browsing the border of the table, only display the contents, which in the web design is more application. Sets the color of the border through the Brdrcolor field.
Table background: In the bgcolor (background color) and bgimage (background image) fields, you can set the color and image for the background, and the image is repeated if the table is larger than the image when setting the background image. Sometimes a peculiar effect can be formed.

   second, format the cell
The formatting of the cell includes the cell and the formatting of its contents, set by the cell's property panel, as shown in the figure.

Text in cells: mainly set for font, font size, color, alignment, and wrapping. In particular here is the "NoWrap" setting, the text in the default cell is "wrapped", and if the content is long and relatively complete, it is set to "do not wrap" and the check box after "NoWrap" is selected so that the width of the table may exceed the display screen when browsing the page. Select header to set the row for the cursor to a caption: The text is bold and automatically centered.
Cell background: Adds a background color or image to a cell in the Bg (background) field, in the same way that the table background is set.
Cell border: Sets the color of the cell in the Border field.

   iii. Format The table using the design scheme
Use the Format Table command to quickly apply a preset design to a table. You can choose the option to customize the design. To use a preset design:
1, select the table and choose "Commands/format table".
2. Select a design in the left list of the dialog box that appears, and a sample of the scheme will be displayed on the right. As shown in the figure:

3, to further customize the design, you can "rowcolor (row color)", "Toprow (first line)" and "Leftcol (first column)" to modify.
4, to modify the width of the border, enter a number in the Border field, or 0 if you do not want a border.
5. To apply the design to the table cell (TD label) instead of the table row (TR tag), select Apply all Attributes to TD tags Instead of TR tags (applies all attributes to the TD tag instead of the TR tag).
table cell formatting overrides all the formatting you specified for the cell's row. However, if you want all cells in a row to be formatted in one format, it is better to format the row rather than each cell of that row, so that you get a clearer and more concise HTML source code.
6, click "Apply" or "OK" to use the selected design format form.

   Four, formatting tables and cells in several order problems
What happens if you set both a table background and a cell background? Which one setting takes precedence?
When you format a table in the document window, you can define the properties that you want to apply to the entire table or selected rows, columns, and cells. When a property, such as the background color or alignment, sets the entire table and the settings for some cells in the table, it is useful to understand how Dreamweaver interprets the HTML source code.
When the same property is set more than once in the table, the Dreamweaver will be interpreted as follows: the cell format (part of the TD label) takes precedence over the row format (the TR tag), and the row format has precedence over the table format (table label). So, if you specify a cell whose background color is blue and the entire table background color is yellow, the blue cell does not change to yellow because the TD label has precedence over the table label.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.