Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Customizing & Modifying Table Properties

  • Open specials-table created in a previous lesson
  • The table shows a double border which is a default HTML behavior
    • To get rid of that, set cell spacing to 0
    • We also want some padding around the text within each cell so we will add some cell padding
    • We will center the table on the page using align center
    • Add another table row so we can include another special
    • To do this, place your cursor in the last table cell and hit the shift key
    • Add a new special in the new row
    • Play with the table widths feature, showing remove table widths & how it adjusts the table to perfectly fit the data

Customizing & Modifying Table Properties

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.

  • Intro 0:00
  • Save Page 0:33
  • Modifying the Table 3:05
    • Table Widths
    • Select Table
    • Borders
    • Cell Padding
    • Select Column of Content
    • Remove Column
    • Add and Remove Rows
    • Merge Columns
  • Summary 12:45

Transcription: Customizing & Modifying Table Properties

We are now going to take a look at modifying table properties for our page content in Dreamweaver.0000

I have a table; what I have done is taken the Travel Specials for Wanderlust Travel and, instead of having it in paragraphs and headers on the page, I have moved it into a table.0008

This table needs a few modifications to it; right now, you can see, my specials.html has also not been saved.0023

I am going to go ahead and save it; I'll do a file save; and then I am going to do a Save As, also.0032

What I am going to do is name this specials-table; now, if you think you are going to be modifying a page in a rather substantial way as you are working on your website, just keep in mind, we have no way to go backwards in Dreamweaver, or revert to a prior version of a page by default.0043

So, if you are going to make major changes to a web page, always make it a new page, and then my old page can remain the same.0067

Once you have completely finished working with that page, you can always delete the copies you no longer need.0077

But just keep in mind, you can't really go backwards.0085

My Specials page had this content outside of a table; once it's in a table, I may decide, "You know what, I want to remove the table"; so those are a few things that we may want to do in the future.0089

So, I'm going to save this table version as a separate name.0103

I'll do a save; there is my Specials table.0108

Now, if I really wanted to bring this Specials page back, I have not yet closed it in Dreamweaver; this is where I can start doing my Ctrl+Z or Command+Z.0112

You can see, it's just walking right back through the various steps; and there is my page, my specials.html page; and I went back quite a few different ways, or different steps.0126

You can do somewhere between 50 and 75 steps backwards; so Command or Ctrl, Z--just keep doing it, and as long as you haven't closed the page, it's available to you.0141

Whether you saved the page or not doesn't matter; whether you have closed it or not does, because when you close a page, you close the history for that page within Dreamweaver.0155

I am going to go ahead and save this now as my original specials.html, and I have my table version that I am going to modify.0168

I'll close up the original--it is important to keep your workspace nice and neat when you are working--and let's go ahead and start modifying this table in a few different ways.0179

I have a header that says "The following is a list of our present specials"; so you can see, we have content in the left and content in the right.0193

We don't have any type of width on our table; when I put my cursor anywhere in the table and click, you can see the table widths: these green stripes show up on my table.0203

Now, on this table they are on the top; once in a while, you will see them show up on the bottom of the table, so if you can't find them at the top, look at the bottom.0217

Here is our page with our table on it; what do we want to do to it?0227

Well, I think it might be handy, first of all, to take this piece and make it a little wider; now, my table widths...if I click in this, notice how they don't have any numbers assigned in the green-stripe area.0232

Watch what happens when I click and grab this to move it: and I'll move it over even just a little bit more.0247

Now, these are a little wordy--a little bit too many words on the left-hand side to look really nice; and you can see, the right-hand side is getting rather squished.0257

However, now I have numbers up in my table widths.0268

Once you have those numbers there, think of that as almost locking the width of your table; so once you have added them, this is not going to flow like it once did in terms of taking on the width of the content for the page.0273

So, that is a little bit wide: I'll go ahead and make this a little narrower--that looks a little bit better.0290

You can see, we have some content stuck in the middle of the table cell.0297

Now, the one thing I want to decide is, "Do I really want borders on my table or not?"0303

I certainly do while I'm building it, but do I want them to stay there?0309

And if I want them to stay there, I don't want this double line.0313

Let me open up the Properties area; and I'm in the Window menu--go down to Properties, and if I click inside the table, I want to show you something.0318

What this is doing is: it is showing me the tags in the tag selector for the table.0329

So, as long as I click anywhere in the table...if I click the word "table," it highlights the entire table for me.0336

That is how you can select a table; it also gives me information about the table, such as how many rows and columns; adds my padding and spacing and width; I have an alignment here for my table; and I have a border.0346

Now, the deal with the double borders is: if you add a border, what it is going to do is add a border to the outside of the table, and then add borders to each cell.0364

And that is what is giving it the double border look.0375

The way you can get rid of that is: in Cell Spacing, just add a 0--as soon as I click off, you will see we have a nice single border now.0378

That looks a lot better.0390

So, I did move off of my table down in the Properties; so you can see I am back to regular text.0392

To re-select it, just put my cursor in that and click the table tag.0400

That will get you back to your table content.0406

Now, if I am going to use borders here, those borders are a little tight to my text, so I'm going to add some cell padding.0409

And anywhere in the range of 3 to 5, sometimes even 2 to 5, pixels, or just the number 2 through 5, in here...I'll start with 3 and take a look, and you can see, that did add some space surrounding my text within each cell.0419

I think I am going to click on that table tag again and make this just a little bit bigger than that; I'll go ahead and set it to 4.0437

You can see how the table is adjusting a little bit as we do this.0446

Now, there are a couple of other things with regards to our table; and I'll show it to you here, and then we'll try and get it over in the right-hand column.0451

So, if you want to select an entire column of content (and our column is not very big), I can put my cursor in the first cell and just drag down.0462

Just make sure you select all of the columns in the table.0476

That is one way to select a column of content.0480

The other method is: that is what these table widths are for; as long as your cursor goes into the table, they will show up.0484

If I click the down arrow, you can see, I have "select a column."0493

I can also clear the column width this way; so I am going to choose Clear Column Width, and you can see how my table adjusted accordingly.0499

I'm going to do the same thing over here--Clear Column Width, and now it organizes itself a little bit better on the page.0509

We'll look at it in the browser in a moment.0519

I want to get rid of this last column here that I don't need, on the right-hand side, and I can use this Column Width feature to do that same thing.0522

This little dropdown arrow--this one is a little bit small, but if you put your cursor up inside there, you will see the black arrow.0533

I'll click on it, select the column...and when I use that command, Dreamweaver automatically selects it, and I can just hit the Delete key.0543

That column is gone; so it is fairly simple to do that Delete.0554

Now, we also have this extra row at the bottom; and I want an extra row at the top.0559

So, how do I go about doing that--modifying some of these?0567

Well, we can do it a couple of different ways; so if I go up to Modify (so I want to change something), and I go down to Table, I get a lot of table options.0571

Notice, I can merge and split cells: since I only have one cell set up right now, I have the split cell option; if I had selected more than one cell, it would say Merge Cells.0588

But we also have this piece here, and what I am going to do is: I always choose this one.0602

When you insert a row or a column, it is all based on where your cursor is; and does it insert above where your cursor is?--does it insert below?--it is always questionable there.0609

What I like to do is control that very easily; so I'm going to choose Insert Rows or Columns.0622

Now, notice, it is referencing my selection; so I do have to pay attention to where my cursor is.0629

But what I want to do is to insert a row above the selection; so this is going to go above wherever my cursor is.0636

I'll click OK; and there is my row.0645

Now, if that wasn't the correct row for you, Command or Ctrl+Z will take you backwards, and you can make sure that you are in the first row before you do that.0649

But see, you could even add columns that way, and left and right of content or above or below; so it gives you a lot of control.0660

Now, what I am going to do is take these two columns and merge them.0670

I'll click in the first one, hold my mouse down, and drag to the right; I have selected both cells.0675

Now, I could go up to that Modify, Tables to merge them; but let me show you another way where you won't need to use the menus.0683

That is down here in our Properties area: right under the word Row is this little icon, and notice, it says "merges selected cells."0692

If I had just one cell selected, the icon on the right side, Split Cells, would be highlighted.0703

I'm going to click this little icon directly under that word Row in the properties; and you can see, it merged it just fine.0710

And I'll put my cursor in here, and I'll go ahead and..why don't I take this text and drag it in?0719

Now, notice what happened when I did that: it went from a Heading 2 down to a paragraph with actually no format whatsoever.0730

We can take care of that in a different way: I'll click on this and get rid of that extra space by using either Delete key (on the Mac) or a Backspace key (is what I tend to use on the PC).0741

We can always click on this and set this up; but I want to show you some CSS rules for dealing with this first row.0756

But that is modifying a few of the properties available to you for the overall table itself.0765

You click in the table, select the tag selector, and you have quite a few different properties available to you down within the Properties area.0772

That is modifying a few table properties within Dreamweaver.0784