New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Reviewing table structure

From: Dreamweaver CS5 Essential Training

Video: Reviewing table structure

I still occasionally get the question, we should no longer use tables, right? Well, not for creating layouts, but tables are well suited and should be called upon to do what they were designed to do, which is to display tabular data. Tables have unique structure designed to present data to the user and in that regard. they succeed very, very well. Tabular data is accessible and the structure can assist in both styling and clarity. Understanding table structure and when they should be used is critical to making sure your content remains structured correctly.

Reviewing table structure

I still occasionally get the question, we should no longer use tables, right? Well, not for creating layouts, but tables are well suited and should be called upon to do what they were designed to do, which is to display tabular data. Tables have unique structure designed to present data to the user and in that regard. they succeed very, very well. Tabular data is accessible and the structure can assist in both styling and clarity. Understanding table structure and when they should be used is critical to making sure your content remains structured correctly.

Before we move on to building and styling tables, we should take a moment to review their basic structure so that we will have a clear understanding of the meaning behind the tags that make up our tables. We will create a table and then explore its structure to learn more about tables and their markup. So here I have the tables.htm file open and as you can see it's just a blank page. So we have just got a blank page that we are going to drop a table right onto. Okay, now one the easiest ways to get table on the page in Dreamweaver is to use the Insert panel, and if I go up to our Insert panel and look at our Common objects, I can see that right there is the Insert Table.

I have always thought that icon looks a little bit like a waffle, don't you think? Just go ahead and click on that and Dreamweaver is going to bring up an Insert Table dialog box. The thing that I love about this dialog is that you can do so much to your table in one place. There is a lot going on here. All right, so the first thing that we are going to do is determine how many rows and how many columns we want. We want 10 rows and 6 columns. And as fate would have it, I already have 10 rows and 6 columns specified.

Next for table width, you wanted to do 85%. So type in 85% there. For border thickness, let's do 0. For cell padding we will do 5 and for cell spacing we will do 0. And you're probably at this point saying, wait a minute what is all that? Well rows and columns are pretty self explanatory. We are going to have a table that is 10 rows deep, 6 columns wide. The table width set to 85% is telling the table you should be 85% of the size of your parent element.

That could be wrapper div tag. It could be the body tag. It could be anything else that it's inside of. You could also use an explicit width. If you wanted it to be 500 pixels, you could go ahead and target 500 pixels. You can also just leave that blank. If you leave the table width blank, then the contents of the table form its table width. The border thickness determines the visibility or thickness of those gray borders that you typically see on most HTML-based tables. Cell padding is the amount of space inside the table cell that holds the content away from the edge of the table wall and cell spacing is the distance between table cells.

So 0 would mean they are butting right up against each other. For the header, we are going to put the header on the top row. The header will create a special type of tag called the tag that identifies that as being a header cell and the content underneath it is identified as belonging to it. Now, here is one of my favorite features. You will notice that we have two additional dialog boxes. One for Caption, and one for Summary. Let's go ahead and do our caption. So click inside the Caption dialog box, and type in Big Sur Retreat Hiking Trails.

So, Big Sur Retreat Hiking Trails. The table caption is a tag that is added inside the table and it assists with the accessibility by identifying the contents of the table itself. Next, we will enter a summary. So click inside the Summary dialog box and you want to type in 'A listing of all hiking trails available for the Big Sur Retreat tour package.' There we go.

Now what's the difference between a summary and a caption? Well a summary is going to be an attribute of the main table tag. It is essentially a description of the contents of the table. Screen readers or other accessibility devices can read the summary out loud and the person browsing the page can determine whether they want to inspect that table or not. So I am going to go ahead and click OK, and there is our table on the page. Now all of our tables are wrapped in a table tag and in order to see this a little bit more clearly, I am going to switch over to Code View. Here we go.

So as you can see, our table is wrapped with a table tag. If we need to provide further information about the table, we could give it an id or a class or anything else to extend the meaning of that particular table itself. Inside the table tag, you have table row tags that form the individual rows. Inside the table row tags, you either have table header tags, like we have here, or table data tags that form the individual table cells. The header tags are used to identify headers while the table data tags are used to display the actual data itself.

Now as you can see, when I scroll up, the caption is contained within its own tag and the summary right here is listed as an attribute of the table tag itself. Now although there are more tags that allow us to build structure within our tables, those tags form the core table tags and are all that is required to build a simple table. Now I am going to switch back to Design View because I want to show you a couple of the table-based features that Dreamweaver has. Now, if you select the table on the page, you are going to see these green outlines down here towards the bottom of it.

In some screens, they may appear towards the top. Well these are essentially visual aids for your table. You can see, for example, that this one is telling that our table is set to 85% wide which in the current window calculates the 789 pixels. You will notice that we also have pulldown menus for each of the columns. We can use those to select the column, clear any type of the column width that have been set through the properties, and we can actually insert columns to the left or right as well if we need to further modify the table. Now speaking of modifying the table, if you select the table and I've got to tell you, one of the easiest ways to select the table in Dreamweaver is to simply click inside the table and then use the Tag Selector down here to click on the table tag.

It's a very quick and easy way to focus on the table. But when you select the table, the Properties Inspector is going to reflect the properties of that individual table. Here we can also add rows or columns to our table. We can give our table an id if we wanted to identify this table as a unique table. Here we can specify width, cell padding, cell spacing, and border. We can even choose how we want to align the table on the page or assign a class to it as well. Now based on your current size strategy, the most of the properties that I have just talked about can be modified or set through your CSS.

While there is a great debate of whether the proper technique is to use the table properties or whether to use styles, the true deciding factor should be whether or not the property values need to be communicated along width of the data. If the width or the padding of the table is used only for visual formatting, then they should be controlled with styles. If it's important that the user agent knows that the table cell should be 20 pixels wide, then you should apply the values to table property. Now that we have reviewed basic table structure, we can work on displaying tabular data on our site in an attractive, accessible, and structurally sound manner.

Show transcript

This video is part of

Image for Dreamweaver CS5 Essential Training
Dreamweaver CS5 Essential Training

135 video lessons · 88730 viewers

James Williamson

Expand all | Collapse all
  1. 2m 57s
    1. Welcome
      1m 8s
    2. Using the exercise files
      1m 49s
  2. 7m 50s
    1. What is Dreamweaver?
      3m 16s
    2. Learning web design
      2m 22s
    3. Current web standards
      2m 12s
  3. 43m 9s
    1. The Welcome screen
      4m 5s
    2. Windows and Mac interface differences
      2m 23s
    3. The Application toolbar
      4m 7s
    4. The Document toolbar
      4m 40s
    5. Arranging panels
      8m 19s
    6. Managing workspaces
      7m 32s
    7. The Properties Inspector
      5m 54s
    8. The Insert panel
      6m 9s
  4. 25m 45s
    1. Basic site structure
      3m 11s
    2. File naming conventions
      1m 49s
    3. Defining a new site
      4m 35s
    4. Managing sites
      4m 51s
    5. Managing files and folders
      6m 36s
    6. Working with browsers
      4m 43s
  5. 27m 21s
    1. Creating new documents
      5m 16s
    2. New document preferences
      3m 6s
    3. Setting accessibility preferences
      4m 56s
    4. Working with starter pages
      3m 46s
    5. Managing starter pages
      10m 17s
  6. 30m 2s
    1. Basic tag structure
      2m 15s
    2. Adding structure to text
      8m 20s
    3. Creating lists
      9m 59s
    4. Getting text into Dreamweaver
      5m 59s
    5. Importing Word documents
      3m 29s
  7. 1h 17m
    1. Understanding style sheets
      2m 16s
    2. The anatomy of a CSS rule
      1m 48s
    3. Setting CSS preferences
      6m 36s
    4. The CSS Styles panel
      10m 2s
    5. Controlling CSS through the Properties Inspector
      5m 14s
    6. Using the Code Navigator
      7m 21s
    7. Using CSS Enable
      6m 45s
    8. Understanding element selectors
      8m 11s
    9. Understanding class selectors
      8m 49s
    10. Understanding ID selectors
      5m 59s
    11. Understanding descendant selectors
      6m 51s
    12. Attaching external style sheets
      7m 44s
  8. 1h 47m
    1. Working with units of measurement
      7m 11s
    2. Declaring font families
      9m 39s
    3. Controlling font sizing
      9m 9s
    4. Controlling weight and style
      8m 0s
    5. Controlling line height
      8m 29s
    6. Controlling vertical spacing with margins
      12m 3s
    7. Controlling spacing with padding
      5m 39s
    8. Aligning text
      8m 26s
    9. Transforming text
      5m 36s
    10. Writing global styles
      15m 42s
    11. Writing targeted styles
      17m 37s
  9. 1h 32m
    1. Understanding image types
      5m 3s
    2. Managing assets in Dreamweaver
      12m 51s
    3. Setting image accessibility preferences
      4m 20s
    4. Setting external image editing preferences
      3m 52s
    5. Placing images on the page
      7m 37s
    6. Photoshop integration
      5m 54s
    7. Modifying Smart Objects
      5m 51s
    8. Alternate Photoshop workflows
      8m 8s
    9. Modifying image properties
      11m 14s
    10. Styling images with CSS
      7m 11s
    11. Using background graphics
      9m 3s
    12. Positioning background graphics
      11m 6s
  10. 55m 16s
    1. Link basics
      3m 37s
    2. Setting site linking preferences
      2m 14s
    3. Creating links in Dreamweaver
      11m 1s
    4. Absolute links
      5m 8s
    5. Using named anchors
      11m 19s
    6. Linking to named anchors in external files
      2m 44s
    7. Creating an email link
      5m 24s
    8. Creating CSS-based rollovers
      13m 49s
  11. 1h 34m
    1. CSS structuring basics
      2m 56s
    2. The Box Model
      13m 21s
    3. Understanding floats
      6m 53s
    4. Clearing and containing floats
      8m 56s
    5. Using relative positioning
      4m 8s
    6. Using absolute positioning
      7m 18s
    7. Creating structure with div tags
      12m 7s
    8. Styling basic structure
      10m 34s
    9. Creating a two-column layout
      10m 37s
    10. Using Live View and CSS Inspect
      7m 51s
    11. Using Browser Lab
      9m 39s
  12. 56m 22s
    1. Reviewing table structure
      7m 41s
    2. Importing tabular data
      5m 13s
    3. Creating accessible tables
      9m 56s
    4. Using thead and tbody tags
      4m 0s
    5. Basic table styling
      8m 45s
    6. Styling table headers
      7m 52s
    7. Styling column groups
      4m 22s
    8. Creating custom table borders
      5m 1s
    9. Styling table captions
      3m 32s
  13. 1h 43m
    1. How forms work
      3m 0s
    2. Reviewing form design
      3m 2s
    3. Creating accessible forms
      7m 33s
    4. Setting form properties
      4m 6s
    5. The fieldset and legend tags
      4m 32s
    6. Inserting text fields
      5m 58s
    7. Inserting list menu items
      5m 26s
    8. Inserting checkboxes
      7m 50s
    9. Inserting radio button groups
      6m 22s
    10. Inserting text areas
      4m 12s
    11. Inserting submit buttons
      3m 37s
    12. Basic form styling
      12m 0s
    13. Form element styling
      8m 52s
    14. Styling form layout
      11m 49s
    15. Adding form interactivity
      2m 47s
    16. Using Spry validation widgets
      12m 49s
  14. 1h 23m
    1. Planning for templates
      10m 51s
    2. Creating a new template
      10m 37s
    3. Using editable attributes
      13m 43s
    4. Creating optional regions
      6m 23s
    5. Creating new pages from a template
      9m 17s
    6. Applying templates to existing pages
      6m 9s
    7. Working with nested templates
      7m 56s
    8. Working with repeating regions
      12m 58s
    9. Modifying templates
      5m 41s
  15. 40m 14s
    1. Behaviors overview
      3m 47s
    2. Hiding and showing elements
      9m 18s
    3. Spry overview
      4m 4s
    4. Using Spry widgets
      11m 36s
    5. Adding Spry effects
      3m 6s
    6. Using the Widget Browser
      8m 23s
  16. 28m 18s
    1. Inserting Flash files
      5m 4s
    2. Setting properties for Flash
      6m 27s
    3. Dreamweaver and Flash integration
      6m 6s
    4. Encoding Flash video
      6m 10s
    5. Adding Flash video
      4m 31s
  17. 45m 28s
    1. Running site-wide reports
      6m 33s
    2. Checking for broken links
      5m 41s
    3. Checking for browser compatibility
      8m 3s
    4. Adding remote servers
      8m 0s
    5. Uploading files
      7m 20s
    6. Managing remote sites
      9m 51s
  18. 34s
    1. Goodbye

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes changes my life forever. @JosefShutter
@lynda is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?


Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.