Shulou(Shulou.com)06/02 Report--

Editor to share with you how to design Dreamweaver color border table, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Start the Adobe Dreamweaver software and click the New HTML button in the Welcome interface window to create a new blank web document.

2, after saving the document, change the workspace layout in the upper right corner of the Dreamweaver window to the "Classic" layout, which allows the "insert" panel to be displayed.

3, click the "Common" panel in the "insert Table" button, pop-up "Table" dialog box, set the insert table for 3 rows and 3 columns, width of 600 pixels (you can set rows and rows and width values according to your needs), border thickness, cell margins and spacing are set to 0, we will use CSS style to control them.

4. After the table is inserted, enter any text in the cell. Then click the "New CSS style Rule" button on the CSS style floating panel on the right side of the Dreamweaver window, and the "New CSS Rule" dialog box pops up.

5, in the "New CSS Rule" dialog box, "Selector Type" drop-down list, select the "tag (redefine HTML element)" option, "selector name" drop-down list, select "table" that is, the table tag, and the "rule definition" option defaults to "this document only" (if you need to use this style for tables in other documents, you can change this option).

6, click the "OK" button to open the "table CSS Rule definition" dialog box, select the left "Classification" option in the "border" item, we will set the outer border of the table. The right window in the "style", "border", "color" bar under the "all the same" check box, because for the table we only set the upper side and the left border style, on and left "style" select "solid (solid line)", "width" fill in the value 2px (thin border table here fill 1 pixel), color can choose the color you like. Click the OK button to finish styling the table.

7, return to the Dreamweaver window again, click the "New CSS style Rule" button on the right "CSS style" floating panel, and pop up the "New CSS Rule" dialog box. This time we select "td", that is, the label of the cell, in the "Selector name" drop-down list of the "New CSS Rule" dialog box. Other options are the same as above.

8, click the "OK" button to open the "td CSS Rule definition" dialog box, first select the left "Category" option in the "block" item, we set the "text alignment" mode to "center (center)", so that the text in the cell is centered.

9, then select the "box" item in the "Category" option on the left, check the check box "all the same" in the "fill" column by default, and fill in the value 5px, so that the text in the cell and the distance around the cell are 5 pixels.

10. Finally, select the "border" item in the "Classification" option on the left, and let's set the border of the cell. The right window in the "style", "border", "Color" bar under the "all the same" check box is unchecked, because for the cell we only set the right and the bottom of the border style, right and under the "style" select "solid (solid line)", "width" fill in the value 2px (thin border table here fill 1 pixel), the color can choose the color you like. Click the OK button to finish styling the cell.

Click the "OK" button to finish the production. After saving the document, preview the final page table effect, you can see a beautiful color border table.

The above is all the contents of the article "how to design tables with colored borders in Dreamweaver". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.