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

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!

Merging & Splitting Table Cells

  • Create a new web page called tablePlay.html
    • Insert a new table 10 rows & 4 cols
    • We want to merge the top row so it becomes 1 cell across the top of the table
    • Select the table rows you want to merge
    • Click the icon in the properties area, or right click, choose table & you have many options
    • We will also merge 4 rows down in the table
    • Select the cells and click the merge icon in the Properties area
  • Now we want to split that new cell into 2 rows
  • Select the cells & hit the split icon in properties or right click, choose table & select split cells
  • The table structure is now very different than our original table
  • It is very easy to merge or split table cells using Dreamweaver

Merging & Splitting Table Cells

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
  • Create and Save New Page 0:10
  • Insert Table 0:54
    • Table Options
  • Moving Cursor in Front of Table 4:04
  • Adding an Image 5:35
  • Moving a Table 6:29
  • Merging and Splitting Table Cells 7:41
    • Merging Cells
    • Splitting a Cell
  • Summary 9:12

Transcription: Merging & Splitting Table Cells

We are now going to take a look at merging and splitting table cells and organizing tables just a little bit within Dreamweaver.0000

What I am going to do is create a new page to do this; I am also not going to work with any content within the table, so we can quickly navigate around the table to show you a few of these different ways you can manipulate tables.0010

I'm going to create a new page by using Ctrl+N or Command+N; I'm going to save this as table-play.0026

I don't want it in my Text folder, so I am going to move out one folder and make sure it goes into my root folder.0036

This one is going to be called table-play; in other words, it isn't really related to our Wanderlust Travel website.0045

I am going to insert a table, and this time I am going to use the Layout tab within Dreamweaver; and it's the last icon here of Table.0054

When I click that, I get the dialog box for inserting a table; and I am going to create a table that is 10 rows and 4 columns wide.0065

I'll leave my table width to...let me go ahead and add it; let's do 900 pixels.0077

Now, when you set your table widths, you can use pixels or a percentage.0085

I could go ahead and set this to 100% of the width of the browser window; the trouble with that is, my table would keep expanding and contracting as the user opened their browser window to full size or made it smaller.0091

Or, if I had a really wide screen, my data would run way across.0109

So, it is usually best, when working in tables, to use some kind of firm sizing; and pixels, as you can see, is an option here.0114

I'll set my border to 1; my spacing then goes to 0 to get rid of the double border; and my padding I'll set to 4; and I'll go ahead and not use a header; I'll click OK.0125

There is our table, four columns wide and ten rows high.0141

Now, how can I go about merging and splitting table cells based on what I want?0147

What I want you to watch is: notice, we have a 900 pixel table width; I'm going to go up here, and I'm going to merge these first four cells.0154

Now, I can click in the first cell and drag to the right; or, to select this row (and I find quite often, people have a little difficulty getting this on their cursor, so you are more than likely going to want to select to get a row)...but if you move over a little bit further to the left, you can see that I have this little black arrow.0166

And when I get that, what that does is select the row for me.0188

You can see, it kind of outlines it; and if I click right at that point, it selects that row for me.0192

You can do the same thing with a column; so I am not clicking my mouse at all--I am just putting my mouse over that column until it turns red or a reddish orange.0199

As soon as I have that, if I click, it will select that for me.0213

That is another way to select rows or columns, and the data within it, within a table (because normally, you are going to have data inside these rows or columns).0218

Now, notice, on this one, my table width is underneath; because this table is way up at the top of the page, those table widths won't fit up there, so Dreamweaver has put it underneath.0230

Now, what I am going to do here is show you something else, and this is a little trick: if I had this table at the top of my page, and I decide I want to add a header to the top of the page, how do I get my cursor in front of this table?0244

That can get very difficult.0261

If it was a big image, sometimes it is hard to get your cursor there, as well; so let me show you a little trick to getting your cursor around or adjacent to content that is a little bit bigger.0263

What I am going to do is select the table; and I can do that either using the table width here or put my cursor in the table and click the table tag.0277

That always perfectly grabs the table code.0289

Now that I have the bigger object selected, what I am going to do is use my left arrow on my keyboard to move the cursor in front of this table.0293

I'll hit the left arrow once; now, I will hit Enter or Return, and you can see, my cursor is right there, making some space for my header.0305

So, I am going to name this Merge and Split Table Cells; and we'll make it a Header 1 by using Ctrl or Command, 1 on your keyboard.0315

All right, so we have our header in front of our table.0331

The other thing I am going to do is add an image; and I am just going to go and grab any image, so I am going to go to the Common tab; I am going to select the tree (any time you see a tree in Dreamweaver, it's an image).0335

I'll go ahead and click the down arrow, click on Image, and go out to the Images folder; and I'll grab an image.0351

And let me grab one that we haven't used yet; I'll do this one.0360

The alternate text is funicular in Austria; and a is a car that travels up the side of a mountain, and you can see that funicular is the little car here to get up to the Riegersburg Castle in Austria.0366

Now, what I want to show you is: what if I decide I don't want this image above the table--I actually want to put it below?0389

Well, I could certainly move the image; but what I want to show you is how to move the table itself; and I am going to close this Properties area to do it.0398

Now, when I move my cursor towards the border of the table, notice I get these little squares attached to it; if I click when I have those squares (you could kind of see the red was outlining)--look at the outer border when I do that.0408

I have that table actually on my cursor, if I click right now.0426

I can click on the table, and I can literally drag that table where I want on the page.0431

So now, I am dragging it before the image, instead of after the image.0438

When I let go, you can see, my image goes underneath.0443

So, any time you have your cursor close to the edge of that table and see these little squares, that is what that is for--so you can grab the table and move it if you need to.0447

Now, let's start merging and splitting table cells.0461

I don't have assigned widths to these columns, and I don't have any content; but it is possible to merge multiple cells together.0465

So, I have selected quite a few of these; I am going to go back to open my Properties area, and I have the Merge icon here.0476

I can also go up to Modify, go down to Table, and here is Merge Cells; or you always have that shortcut available on your system that is mentioned on the right.0487

I will merge these; and you can see, that is exactly what it did.0499

Now, what if I decide I want to split that?--it's all one cell, and you can see, my alignment vertically is always middle.0503

So, to adjust that, I can come down here to the vertical alignment and choose Top instead: that moves my cursor to the top.0513

Now, what I want to do is split this cell into two separate columns.0522

I am going to go down into this Properties area, and right under Cell here is a Split; and if I click on that, I can tell Dreamweaver how I want it split.0529

So, what I want is 2 columns; and I'll click OK, and there is my 2-column structure.0542

You can see, it is fairly easy to work with merging and splitting table cells.0551

If you do that with content within the cells, Dreamweaver will not delete any of your content, unlike some other programs.0558

So, what it is going to do is just merge your content together, and then you can decide where to place it.0568

But those are a few different ways to manipulate and work with tables, and also working with moving tables and inserting content before or after a larger area of content when it's hard to get your cursor into that area.0575

We just took a look at a few different features within Dreamweaver, including merging and splitting table cells within the Design View.0595