Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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
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.
Get unlimited access to all courses for just $25/month.Become a member
59 Video lessons · 70973 Viewers
61 Video lessons · 99889 Viewers
56 Video lessons · 113004 Viewers
62 Video lessons · 15242 Viewers
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.