Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
While it's perfectly acceptable to create tables and then populate them with data yourself in Dreamweaver, it's not always the fastest way to get your data onto your pages. If your table already exists in a Word or Excel document, you can simply import that file directly into Dreamweaver. Dreamweaver will build the table structure from the available data, leaving you to add any of the accessibility features or additional structure your table may require. It's the fastest and most efficient way to get data into Dreamweaver and into a table. When you're working on a PC, you can use the Import Word or Import Excel Document option.
So if I go upto File, and I go to Import, you'll notice that I have Import Word or Excel Document. However on a Mac, you need to first save the file out, as a Comma or a Tab delimited file, and use the Import> Tabular Data option that I'll be showing you in just a moment. Since the Import Tabular Data feature let's you import delimited files, regardless of the program that they originated from, we're going to cover that method to bring our files into Dreamweaver. Now it's also worth mentioning that tables imported directly from Word or Excel, can often bring in unwanted formatting.
So I actually recommend using delimited files as the best means of importing a clean table structure. So to do that, we're going to go into the graphic-design.htm file, this is found in the 09_02 directory and I'm going to scroll down to the very bottom of page, because this is where my table is going to go. So I'm going to place my cursor right there on the last line, making sure I'm of course outside of the text. Now it's very tempting at this point, to say well you know I want a table on the page so I'm going to hit Enter, so I've a blank line to put my table on. Well to be honest, you don't need to do that.
Tables are considered to be block level formatting elements. So just by importing onto page, it's automatically going to put it below this paragraph. The only thing you want to make sure of is you're not still inside the paragraph. You want to make sure you're outside the paragraph by clicking at the very end of this. Okay I'm going to go upto File, and I'm going to choose Import, and I'm going to choose Tabular Data. Now this is actually available to you in a couple of different locations. This is probably the most obvious and it's the one that I use, but if you want you can also go up to Insert> Table Objects> Import Tabular Data.
So it's available in a couple of different locations. Doesn't really matter where you choose it from, you'll get the same options. So I'm going to choose Import> Tabular Data and I'm going to Browse into the 09_02 directory and there's a folder in there called assets. So, I'm going to open that assets folder up, and I have two comma delimited files in there, one for first_ semester and one for the second_semester. So we're going to concentrate on the first_semester. I'm going to go ahead and click Open and we have a few options here, not very many but a couple. The first is asking what the Delimiter for the file is, and if you're not entirely sure Comma or Tab delimiter or the two most common.
But you're certainly able to choose more than these or even in your own end beside it. But Dreamweaver sort of picks up on the fact that this is the comma delimited file. Now the next thing is you can set a specific Table Width. Remember that would go ahead and set a width attribute on the table. We also have the option of setting Cell padding, Cell spacing and Borders. I'm going to leave all of those blank because again those are things that are better controlled through CSS. We also have this option of Formatting the top row. Unfortunately it's not the option of creating header rows. You'll notice that it really just making it Bold, Italic or Bold-Italic.
So it's not going to make it a TH tag or Table Header tag. It's just going to physically format the text inside those rows. So we don't want to do that either because again CSS can do that for us. So all we really want is the clean table data. I'm going to go ahead and click OK, and it imports my table on the page. Now as opposed to the last movie, you'll notice that there are few things that this skipped. It didn't prompt us for example for a caption, or summary or anything like that, so none of the accessibility options that we had in the previous example. All we get is the raw table data directly on the page.
Now if I switch over to Code View, you can see it is a very basic table. We have our table tag, we have table row tags inside that and then just the table cells themselves. The structure of the table, it's a two column table with several rows. The first column indicates the courses that you need to take on the first semester, while the second column indicates the number of credit hours that those courses are going to give you. Now at this point, you can begin working in your table, if you still need to refine it a little bit or change some of formatting options. However, unless you have some default table styling going on, clicking in and editing the portions of this table can be a little bit difficult, just because the table cells are all just sort of budded together.
We don't have any Cell padding. We don't have any Cell spacing. So these are very, very tight. Well, Dreamweaver actually gives us a nice little layout option. I'm going to go upto my Insert toolbar and click on Layout. They give us this little Expanded Tables mode and if I click on that, Dreamweaver is first going to give me a little message about this, but as soon as I click OK, what it does is it makes a table first look a lot larger. Now you're not actually physically changing anything about the table. You're not applying styles to it. This is really only for Design View within Dreamweaver to help you work within the table. It's going to give you a lot of padding around it. You get these really thick borders that sort of let you know where the edges of the table cells are.
So really, it's just a way for you to work a little bit faster. Now I'm going to bring up my Properties Inspector here because there are few things that I want to do to this table before we move on. The first thing I want to do is place some header cells here. So I'm going to highlight the entire top row. I'm going to go down into the Properties Inspector and I'm going to click on the Header checkbox, and that's going to make those cells a header cell. So there are lot of things that we can do structurally with our tables, through the Properties Inspector without having to go into the code. The next thing I'm going to do is I'm going to highlight each of the class numbers here, for these courses, and I'm just going to Bold them.
I'm going to make sure I'm in the HTML tab when I'm doing this, because I want to wrap them in a strong tag. So I'm just adding a little bit of an extra structure within the table cells themselves. Alright so I'm just going to go through each one of these guys, and add a strong tag. Now you may have noticed that when you're doing this, occasionally it may appear that some of the text is breaking down into the table cell and you may think well, I don't have enough room for the content in the left-hand side. So it becomes really tempting to try to grab these handles and move them to give yourself a little bit more room. Avoid doing that, because what you'll do is you'll actually set a width value on some of these table cells, and those are things that we're going to control a little bit later on through CSS.
So right now don't worry about anything but the structure of the table. That's exactly what we're focusing on. Okay, so the basic structure of our table is done. I can go and click back on Standard Mode to leave this Expanded Mode and when I do that, the table is going to refresh and again I'll be the first to admit, that table does not look all that great right now. But what is important is that it is structured correctly, and the data is being presented in the right fashion. Now we're going to style it a little bit later on, but before we do that, we're going to explore what we can do to help make the table more accessible, and current with web design standards.
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.