Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
>> We've seen how to create the structure of data tables, now let's start styling them. If you're following along with the exercise files we're working on the page government.html, which is in the 07_04 folder of the chapter seven exercise files. Open the page in Dreamweaver and then click on the new CSS rule button in the CSS styles panel. Click on tag for the selector type. In the tag menu, click on the arrow to bring up a list of possible tags, scroll down to select table.
For the define in option, leave the selection in styles.css. Previously we had been defining styles in the head of the document, but once we created multiple pages on the site, it made sense to move the styles into an external style sheet that could be referenced by multiple pages throughout the site. We're going to add our table styles to the central style sheet so that all of the pages can share them. Click okay. Click on the box category in the CSS rule definition dialogue box.
Uncheck the same for all box under margin then place your cursor in the bottom field under margin and type 1.3. In the adjacent menu, choose M's as the unit of measurement. The other property that we want to add to the table is actually not available within the CSS rule definition dialogue box, so click okay. Our new table rule is added and can be seen in the CSS rules panel. Click on the add property link and type border-collapse.
In the adjacent property field type collapse as the value as well. Hit enter or return to accept the property. The border collapse property is only used on the table element. What it does is get rid of the default gaps between table cells. It also enables adjacent borders to be merged into each other. For instance if you had two cells in a table and both of them had borders set on all four sides, the borders would be doubled up in between them.
Setting the border collapse property to a value of collapse keeps this from happening. Next let's add a rule for the caption element. Click on the new CSS rule button at the bottom of the CSS styles panel, leave advanced selected for the selector type. In the selector field delete the default text that Dreamweaver has added and type TD, TH. This is another group style. It will affect all of the TD and TH tags at the same time.
Keep defined in styles.css selected and click okay. Click on the box category in the CSS rule definition dialogue box. Uncheck the same for all box under padding and enter .2 in the top field and in the bottom field. In the right field under padding enter .4 and also enter .4 in the left field. Now go to each unit of measurement menu and choose M's.
Next, click on the border category. Leave all the same for all boxes checked. Click in the top menu under style and select solid. Under width type 1 and leave pixels selected as the unit of measurement. Then click in the color field and type #D5DDDD. Now click okay. You'll see that there our styles.css file is now open.
When we began adding rules to it, Dreamweaver automatically opened it in the background. It has an asterisk beside it to denote that it has been changed since it was last saved. Click on that file now. You'll see the last three rules that we have added. Go to the File menu and choose save. Then go back to government.html. Let's preview it in a browser. Click on the glove icon in the document tool bar and select preview in Firefox.
Scroll down to see the whole table. It reflects the styles that we just added. You can see that the border is not doubled up between adjacent cells but is one pixel in width throughout. In this case, we chose not to style table heading cells any differently than body cells, but their default styling of bold is still in effect because we did not explicitly override it. But you can style tables just as you would any other element to fit into the design of your site.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.