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!

Using CSS for Formatting Tables

  • We will take a look at styling table properties using CSS
  • We want to add styles for the table and the cells within the table
  • Open specials-table.html created in a previous lesson
  • If you put your cursor in the table, you will see the various tags that are used to create a table
  • The first row of our table uses the th tag standing for table header, notice that text is bold & center, I want this text to be left aligned within the cell
    • We will add css for the table, th & td tags
    • We will also create a class so we can add striping to the table to make it easier to read
    • Create the style rules for the th & td tags, th-text-align:left & td-text align:right
    • Add a style for the table tag for font size & family
    • Note how you use the tag selector to locate the tag you need to style
    • Then use the CSS styles panel to style that tag

Using CSS for Formatting Tables

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
  • Table Styling 0:33
    • Table Header Tag
    • Removing a Class
    • Content Styles
  • Preview in Browser 7:59
  • Fixing Table Size 8:39
  • Summary 10:53

Transcription: Using CSS for Formatting Tables

We are now going to take a look at adding some CSS to customize the styles for our table content.0000

I'm in the specials-table.html page, and what I have done is taken all of our specials that we had sitting on the page as basic text, created a table, and moved that content into the table.0009

Now, the table still needs a few modifications; so we are going to take care of that now.0027

But one of the modifications is: let's start styling the content inside of our table--because right now, we don't have any styles for this table.0034

So, if you look in the left-hand column, and you click on this content, you will see that there is a class called Specials attached to that content.0047

And I can keep that class on there; we are going to add some additional styles for the right-hand side.0059

But when we do that, it may affect our left-hand side at the same time; so let's take a look at that.0069

Now, there is such a thing as a table header tag; when I inserted this table, I said I didn't want a table header; but sometimes, once you get the table going, you decide you do want the first row in the table to be a table header (or the left-hand column).0076

So, how can you adjust that once the table is created?0095

Well, what I am going to do is put my cursor in this first row; and if I move down to the Properties area, you will see there is one called Header.0100

If I click on that, it is going to change the code; so notice, my code right now is a td, standing for table data; that is a basic content cell within a table.0110

This is going to change once I click this header; so I will go ahead and do that.0126

My cursor is in the row I want to make a header; I will click Header; you will see, my content changed quite a bit; and I also now, instead of a td tag, have a th.0132

You will see very shortly why I am pointing that out.0145

Now, what a table header does is: it centers and makes bold whatever is inside of it; so, that is how my content here ended up centered and bold.0149

What I want to do is style that just a little bit better than what it is set up now.0163

And I can do that based on some of my other styles on the page.0168

Let's say this side, I did not want to have this large text; or, I wanted to match the text; we have to make a decision about what to do here.0174

So, I think what I will do is: up in this area, I'm going to copy this Specials class and assign it up here.0186

I'll take this Specials; up in my CSS Styles panel, I'm going to do a right-click; and remember, we always have that Duplicate available.0195

The key is "What am I going to duplicate it into--what rule?"0206

So, I'm going to change this into a tag; and I know that table header is a th tag, so that is what I am going to modify.0211

I can use that th tag right here; and it is going to maintain the same styles as this Specials class.0221

I'll go ahead and click OK; and you can see, that is exactly what it did; it now matches that text in the left-hand side.0231

Here is my th with the exact same properties.0241

Now, I am going to make this just a little bit bigger; so I'll do 1.2 em, and you can see, it got bigger; my Specials over here did not.0245

Now, the other thing I want to do--that looks fine at the top, but I don't want this to have that Specials class anymore; and that is this one right here; it's applied to this.0257

So, what I am going to do instead is: I am going to click in that row and go down here in my class and say, "no class any longer."0269

You can see, it removed it; so I can very quickly remove that class from the left-hand side.0280

Just click within that cell, go into the class, and say "no class."0288

There we are; you can see how it is affecting the text.0296

So now, all of my text looks the same, which may or may not be what I want; it's kind of hard to get an overview of that left-hand column now that we don't have the text assigned in quite the same way.0301

But what I am going to do is: I want all of my text in the table to match the text that is out of my table.0315

Right now, this is not the same font as this one up here.0323

If I look at my p and li tag, you can see it's Georgia font--and I don't really want it Georgia font, so I'm going to select that.0329

I click in the right-hand side here, and within my font stack, I have some other options.0342

Let me go ahead and make that Palatino Linotype.0348

It is very obvious now that these two are different.0353

I want my table cells to match my paragraph text; there is a quick and easy way to do this.0358

I know it's a td tag that I need to modify, because if I click inside every one of these cells, it's all the same.0367

What I can do, if I want it to look like my paragraphs and my bulleted list--I can simply click on that, put my cursor in there, type a comma, and say td.0375

And look at what happened to our table: it is now matching the rest of our page content in terms of styles.0389

That looks pretty good; now, what I want to do is make this just a little more obvious.0398

So, I'll select it, and I'm just going to make it bold--I'll just keep it at bold for right now.0404

We may be adding more specials before our site launches; so we'll just make it bold so it's a little more obvious to the user.0413

Now, you will see that by default, things end up in the middle of that table cell; and what I am going to do is select this column of content, using my table widths up at the top here--Select Column.0424

And when I do that, down in my Properties area, notice, it says "cell."0441

What I am going to do with my cell is set the vertical to top; so this is the vertical placement of my text within that table cell.0448

My right-hand side is up at the top, because I have a lot more text; but the left-hand side is not.0461

I'll change the vertical by default; HTML puts it in the middle.0469

You can see it pulled it up, and there is my text.0475

Let me go ahead and save this, and let's look at it in the browser and see how it's looking.0480

Dreamweaver is prompting me, because, if you notice, my HTML page was saved, but not the new styles that I just created.0486

I will say, "Yes, save the new styles."0495

This is Dreamweaver prompting you before you put it in the browser; and there is our table.0499

Now, there is one other issue: notice, our table extends all the way out.0507

This is kind of the old-fashioned way we used to work with our content within the Web; but what I want to do is make that table a fixed width, so it is not going to extend all the way across.0513

To do that, I'll click on the table tag; and let me set this up to 600 pixels wide.0529

Notice, I am not affecting the columns--just the overall table.0536

Let me click off of that; my save was not showing...and now I have a save.0542

Let's take a look at that in the browser: I'll go over here--let's preview it in the browser.0550

There is my table of Present Specials.0558

Now, we can decide if we want that table to be centered or not; let's do that really quickly as well, and show you how to do that.0562

It all comes down to the table; I'll go over to the Align Center, and you can see, it is staying in the center of our content.0570

The other thing I am going to do is click the table tag and remove that border.0580

Now, nobody will even know that this content even resides within a table.0589

I'll save my page, preview in the browser, and whatever size I make this, you can see, that stays centered in the browser window.0594

And I am doing it really slowly--that is why it's a little bit jerky here.0606

But it is centered; our content is remaining inside a table, so it all stays aligned.0610

We may still want to do some style modifications to this table--this left-hand column is a little bit narrow--but that is something that we can do really quickly right here.0616

Now, if I really need these columns changed, I do need to click and drag them; there we go.0628

And I think I'll make that just a little wider; and I'm going to set this to 700 wide instead.0636

There we are; we'll take a look at it once more--and our table is coming into shape!0644

That is creating a table, modifying a few more properties of the table, and also adding some CSS style rules specifically for our table content.0654

That is how you can work with content within a table in Dreamweaver.0668