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!

Aligning Table Content

  • There are a few different types of alignment within a table
  • Tables, table rows, and cells within a table all have an alignment feature
  • If I place my cursor into a table, I can see the table cell, table row & table tags within the tag selector
  • You can select any of these 3 tags in order to align content
  • Selecting the tr tag which will affect only this table row
  • I will choose horizontal-right & notice only that table row changes its alignment
  • If I select the table tag & choose align-right, notice the entire table moves to the right on the page
  • I can also choose a single table cell by highlighting it, and choose horizontal-right
  • It is important to always stay at the highest level of tags that you can when setting up the alignment in order to avoid alignment conflicts
  • If you need all the cells in a row to align in a certain way, choose the tr tag to align instead of each of the 4 td tags
  • Tables can be created using percent or pixel widths
  • Change the table width to a percentage & preview in a browser
  • Notice how the table adjusts to fit the browser based on a percentage of the browser window
  • Now that monitors can display very wide widths, using widths for your tables can drastically change the look & layout of your table, so I do not use % much anymore

Aligning Table Content

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
  • Modifying Table Content 0:38
    • Table Tag Properties
    • Cell Alignment
    • Center Content in a Row
    • Align Content in a Column
  • Summary 4:01

Transcription: Aligning Table Content

We are now going to take a look at working with table content; but what I want to do is show you how to align table content.0000

I'm in the table-play.html page that I have been using, and I'm going to save and close up that file; what if I go out to another page...and let's go back to some of these pages that we have created already; there are a few of them.0010

I want a page that has some content; so I'm going to open up specials-spreadsheet.0030

And you can see, here is my table; what I want to do is modify the content here, just a little bit.0038

If I put my cursor in Travel Specials, notice that in the Properties, I get a property for a cell.0046

If I click the table tag, I get the properties for a table--the entire table.0056

Now, I also have a couple of other ways I can work with tables: if I select both cells in a row, you can see I get the Row property within the Properties area.0064

We actually have cells, rows, and tables within HTML; there really is no such thing as an official column in HTML code.0079

The tr tag down here is the one that represents a table row; so to select a row, I could just put my cursor in this row and come down and click the td (standing for table data) to select the cell.0091

Or, if I move to the left one...every cell is within a row; if I wanted the whole row, I would just click tr.0109

Just be aware that you have the table, the row, and the cell; or that td might be a th in this example because it's a table header.0118

Now, notice: any time I am working in a cell, I have these alignments available, both horizontal and vertical.0132

It is always best to try and stay at the highest level of alignment you can; and I'll show you what I mean.0140

What if I want this entire table to be centered?--what I would do is put my cursor in it, click the table tag, and go over to the Align property and say "Center."0148

And you can see, that centered it in my page.0161

Now, what if I want to center content in an entire row?0164

Well, let me click in the row--anywhere in the row; I'm going to click the tr tag, and notice, now I have horizontal and vertical, just like in a table cell.0170

But when I have a row selected, it does more than one cell at a time.0183

So, if this table had 6 columns in it, that would allow me to align all 6 columns at the same time; otherwise, I could do it a cell at a time.0189

So, let's say this Discount in here--I selected those; they are a column, so there is no official HTML code to select that; and I am going to align Horizontal Right.0201

You can see, it definitely aligned it right.0217

So, it's really up to you if you want to do a cell or if you want to do a row or align the whole table; just be aware that all of those are available for you.0221

Now, I don't want this right aligned, so I'm going to Ctrl+Z or Command+Z back, and that will take care of that one.0233

But that is how you can align tables, rows, and cells, and it also shows you the difference between those various alignments.0241

I tend to find people tend to get confused because there is really no such thing as a column; we want to be aware of the coding for a table, and there is no official HTML code for a column--only for tables, rows, and data or cells within the table.0252

That is modifying a little bit more with HTML tables within Dreamweaver.0274

Thank you for watching Educator.com; see you in the next lesson!0281