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 display tabular data. Tables have a unique structure designed to present data to the user and in that regard they succeed 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 that your content remains structured correctly.
So, before we move on to building and styling tables, we should take a moment to review their basic structure, so that we have a clear understanding of the meaning behind the tags that make up our tables. So, we'll create a table in Dreamweaver and then explore its structure to learn more about tables and there markup. Now I have the table.htm file open from the 09_01 directory, but as you can see it's a totally blank page, so I'm just going to use an empty HTML file and insert a table onto the page. The easiest way to do that is to go up to the Common objects in the Insert panel, and I want to find this icon about the fifth icon from the left.
To me it kind of looks like a waffle, but that is the insert table icon, I am going to go ahead and click on that and when I do that I get a dialog box that allows us to go ahead and set a lot of the properties for our table within the dialog box without having to go into a lot of code. So, the first question that it's asking me is how many Rows do I want and how many Columns? Well, for this sample table I'm going to do 10 Rows and 6 Columns, and the next thing it wants to know is how Wide do I want this table to be? Notice that we have the have the option of setting it in pixels or setting it in percentages, I'm going to choose percent and I'm going to do 85% that means that the table is going to be 85% of the available space for it.
For Border thickness, I'm just going to go ahead and turn that off, so nothing there and nothing for Cell padding and nothing for Cell spacing, those particular properties, Border Cell padding and Cell spacing, have been made obsolete in HTML5, those are the things that you should control with CSS now, and not Table Attributes. The next choice that I'm faced with is whether I want any header rows or columns? In this case I'm just going to do a Top header row on my table and then we get down to some Accessibility options which is really nice. This is one of the cool things about using the Insert Table icon inside Dreamweaver, you get to go ahead and enter in a Caption and a Summary if you want to.
Now in this case we're going to do a Caption and I'm just going to type in Required course load for Graphic Design. So, obviously for the Caption I'm going to type in some descriptive text in terms of what content is inside of the table. And that is an Accessibility feature, so that screen readers or other user agents can allow people or devices to parse the table and figure out kind of what the contents of that table should be. Now Summary is very much like a description, so it's almost like you're typing a longer description of the table, but that has also been made obsolete in HTML5, so I'm going to leave that off and just leave the Caption.
Now as soon as I click OK, I see my table on the page. You can see it's pretty wide and that's because we told it to be 85% of the available space. The Caption is showing up a top, but I am not really interested right now in how it displays visually on the page. What I'm interested in is looking at the code structure, so I'm going to switchover to Code View and here we can see our table. Now at the beginning all tables are wrapped in a table tag, you can see because the only attribute that we set when we insert our table was width, the width attribute is showing up there.
Now to be honest with you that should also be controlled through CSS, but just so we could see the table on the page, I went ahead and entered in a width value. Now just after the opening table tag comes the caption tag, so it's actually sort of in between the table's content in the opening table tag itself. So all you need is an opening and closing caption tag and then you just type in whatever text you want for the caption itself. Now after that tables are made up of table rows, so you can see here we have tr tags, stands for Table Row and then inside the table row tag, we have a series of cells, those cells can either be ths that means that is a header row and header basically just indicates that whatever content inside of that is representational of the row or column that it represents.
In this case the ths are scoped, so they have a scope attribute of call and notice that Dreamweaver did that for me automatically, I didn't have to do it myself and it scopes this header cell to all the cells underneath in a column, and that's because we told Dreamweaver that we wanted a header row at the top of the table and not on the side. Then you'll notice that initially all those were empty and they just have this non breaking space character in that, that really goes back to some really, really old browser bugs where empty cells would collapse. You don't necessarily need those, but it's kind of nice that Dreamweaver goes ahead and places them in there for you, in terms of placeholder data.
Now if I continue to scroll down, I can see that after the table rows that has my table headers, each of the table cells are represented as td or Table Data tag and it's here that I would come in and I would start entering in the content for my table. In this case, I have the exact number of rows and table cells that are requested when I inserted the table onto the page. Although there are more tags that allow us to build structure within our tables, the tags that we're looking at right now form the core of the table tags, and are all that's really required to build a simple table.
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.
Your file was successfully uploaded.