Creating a Table

Tables are still the best way to display data and Dreamweaver makes it easy to work with tables

There are 3 different ways to create a table in Dreamweaver

You use either the insert menu or the insert bar

Within the insert bar there are 2 tabs that allow you to insert a table, both the common & the layout tab have table icons in them

We are going to insert a table in the specials page that lists more information about the travel specials and move the information on the page into that table

Open specials.html & rename it specials-table.html

Place your cursor under the present page content

Click the table icon in the common or layout tab in the insert bar

We will create a table with 6 rows & 3 columns, a width of 500 px

Select Top in the header area, the item in blue is the one that is selected & click OK

We will now move our content into the table using drag & drop

That is one way to create a table using Dreamweaver

Creating a Table

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

Transcription: Creating a Table

We are now going to take a look at working with tables within Dreamweaver.0004

And, even though we are not using tables as our basic page layout any longer, tables are still important when displaying data on a web page; so we are going to take a look at that.0009

I have the specials.html page open, and you will see there is something very interesting on this page: we are actually missing a bit of text.0022

It looks like we are missing a bit of text, anyway; but when I hover over it, it looks like there is something on the page.0034

And what actually happened is: when I was modifying another page, I modified a rule in my external style sheet; and when I did that, it made my text white.0044

I did that to use it on a page that uses a black background, which looks great; but because I put it on my external style sheet, it ended up making everything black all the way across my site for those specific html tags.0059

My Header 1, you can see, is orange; my Header 2 is orange; my Header 3 in my style sheet is orange; and that is why we are able to see this information on the page.0081

They can see the headers; but look what happens when I go down to my p and li tag.0096

The color is white for this particular text; and that is why I have white on a white background.0103

And this can tend to happen to you many times; and just be aware--anything you put on your external style sheet can be affecting other pages that you don't realize, because we have multiple pages that are using that style sheet.0111

If I make a change on it, it will affect those other pages, even if I don't have them open.0129

So, what I am going to do is go back to my p and li, and in the color area, I am going to reset my text, and I'll set it to black.0137

I just clicked the color chip in here, and now you can see, my text is black.0148

Now, that doesn't exactly coordinate with my page; but I'll keep it black, because we are going to be focusing on some other pieces, and it will make it easier for you to distinguish between the text.0154

The nice thing about CSS styles is I don't have to make it look perfect here; what I do want to do is just make sure, once my pages are created, that I have it fine-tuned at that point.0169

I'll go ahead and do a Save All; I made a change to the style sheet; I had a little asterisk here.0183

What are we going to do on this page?--I want to show you how to create a table.0192

We are going to create a table directly underneath this line here; the following is a list of our present specials.0198

What I have decided is: I want to put this in a bit more of a table structure.0207

So, in order to do that, I'm going to put my cursor after that line of Present Specials, and hit Enter or Return.0212

If I go to the Common tab in the Insert bar, there is a table here; or I can go to the Layout tab--there is a table here; or I can go to the Insert menu itself, and you can see, there is a table there.0231

Use whatever method you like; just be careful of where your cursor is when you choose this option, because that is where it will put your table.0247

I'll go ahead and choose Table; now, I'm going to determine how I want this set up: I'm going to do 6 rows; I think I'll do 2 columns...actually, let me leave it 3 columns--we can always delete it later.0257

I am going to remove the table width, so I am not going to have a preset width on my table, and I'll show you why when we are done.0274

I'll set a border of 1; I tend to do that any time I'm working with a table--it makes it a little easier to see the table when you are working on your web page in Dreamweaver.0283

Then I usually, once I am all done with the table--I can remove that border.0294

Now, this area here is kind of an interesting one: if you don't click inside the icon, you won't be selecting that option.0301

Now, the tricky part of working with HTML tables is: they tend to collapse if they don't have content.0350

So, what Dreamweaver has tried to do is put a character in here called a nonbreaking space; and let me show you that.0357

That is the nbsp; what this stands for is a nonbreaking space--it is a way to add a space character in code for HTML.0366

And what that does is open up our table cells so we can actually get our cursor inside them in Code View.0378

You can see, it's still a little tricky to get your cursor in there; but it is possible.0386

Now, what I want to do in this table is take my table content here; I am going to select it and click on it, and I am going to drag it up into the first table cell.0391

You can see, I didn't have a width on my table pre-assigned; so what happens in HTML is: it automatically expands to fit my table content.0405

I can do the same thing here; so I'll select the text for that piece (and that is why I wanted to keep it black, just to make it a little easier to see what is going on).0417

I am going to put the next sentence up in this area; so you can see how that expanded my table, also, based on the table content.0428

Now, I'll just continue to do the same thing; you can select and drag; and it may seem like this is a slow process, but it is actually pretty quick--just select, click, and drag.0439

Now, you will see, my table does have these double borders on them; we will talk about how to modify the table properties, moving forward.0453

For now, I am just going to get my specials in here, click, and drag.0463

Now, I did six rows, and I have moved my content up into the very first row; what I really wanted was this row here to be up at the top.0470

We are going to need to modify this table; and that is just fine--not a problem; I will show you how to do that.0481

So, I'll go through and just click on these and do the same thing; let me delete this extra space; and you can see, clicking and dragging--getting used to doing that in the Dreamweaver interface makes it so much quicker to be able to do things, whether you are in Code View or Design View.0489

And I find new people to Dreamweaver usually want to cut and paste; and you can spend a lot of extra time doing it that way.0510

Here is my table; now, right now, you can see there are no numbers--just dropdown arrows here, up at the top.0519

I can modify that using that...that is a Dreamweaver feature that won't show in the browser.0532

What I just did was created a new table; I had content already on the page, and I just clicked and dragged it right into the table.0538

Now, clearly this table is not perfect at this point; but I just wanted to get my information into the table, and then I can modify from there.0549

And we will walk through modifying this table in quite a few different ways, including possibly changing the widths of the table, the content...getting rid of the double borders...lining things up...quite a few different pieces.0559

But for now, we were able to take our Present Specials for our Travel Specials page and move that content into a table very easily, using Dreamweaver.0575

Educator.com recommends the Adobe Dreamweaver CS6 Digital Classroom to go with our Dreamweaver course. In this book-and-DVD package, expert instructors provide a complete course in basic Dreamweaver that you can access at your own speed. Step-by-step instructions in the book are supported by lesson files and video tutorials on the DVD, presenting the newest version of Dreamweaver in 16 self-paced lessons. You'll learn to use style sheets, dynamic HTML, multimedia, databases, and much more to design, develop, and maintain your website.