Video: Importing tabular data

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.

Discover how to build web sites, prototypes, and more in this course on Adobe Dreamweaver CS6. Author James Williamson shows designers how to take control of their site by properly naming and structuring files and folders; how to create new documents and web pages from scratch or with starter pages; and how to add content such as text, images, tables, and links. James also provides a background on the languages that power projects built in Dreamweaver—HTML and CSS—and introduces the programming features in the application, for developers who want to dig right into the code. The last chapter shows how to finesse your project with interactive content such as CSS3 transitions and Spry widgets.

Importing tabular data

While it's perfectly acceptable to create tables and then populate them withdata yourself in Dreamweaver, it's not always the fastest way to get yourdata onto your pages.If your table already exists in a Word or Excel document, you can simply importthat file directly into Dreamweaver.Dreamweaver will build the table structure from the available data, leavingyou 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 ImportExcel Document option.

So if I go upto File, and I go to Import, you'll notice that I have ImportWord or Excel Document.However on a Mac, you need to first save the file out, as a Comma or a Tabdelimited file, and use the Import> Tabular Data option that I'll be showingyou 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 thatmethod 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 aclean table structure.So to do that, we're going to go into the graphic-design.htm file, this is foundin 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 ofcourse outside of the text.Now it's very tempting at this point, to say well you know I want a table on thepage 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 tochoose 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 wantyou 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 the09_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 delimitedfiles 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, notvery many but a couple.The first is asking what the Delimiter for the file is, and if you're notentirely 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 arebetter 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 thetable 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 firstsemester, while the second column indicates the number of credit hours thatthose courses are going to give you.Now at this point, you can begin working in your table, if you still need torefine it a little bit or change some of formatting options.However, unless you have some default table styling going on, clicking in andediting the portions of this table can be a little bit difficult, just becausethe 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 soonas 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 ofthe 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 fewthings 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 theHeader 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, throughthe 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 classnumbers 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 wantto 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 appearthat some of the text is breaking down into the table cell and you may thinkwell, 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 giveyourself a little bit more room.Avoid doing that, because what you'll do is you'll actually set a width value onsome of these table cells, and those are things that we're going to control alittle 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 Ido 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 beingpresented in the right fashion.Now we're going to style it a little bit later on, but before we do that, we'regoing to explore what we can do to help make the table more accessible, andcurrent with web design standards.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

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 lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

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