Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Inserting, formatting, and selecting a table

From: Creating a CSS Style Guide: Hands-On Training

Video: Inserting, formatting, and selecting a table

Continuing on with our semantic markup and our structural markup, let's scroll down the page and insert a table. In the old days of web design, and I mean two or three years ago, tables were often used for layout, but now the new web standard is to use your structural markup as the layout method and to do your styling with style sheets. Tables should only be used for data. This line, 'This is a table,' is where we want to insert our table. So put your I-beam at the end of this line and hit your Return key. We are going to use that Common toolbar. Up at the top, if you scan across these icons, you will see one that actually looks like a table. That's the one we want to use.

Inserting, formatting, and selecting a table

Continuing on with our semantic markup and our structural markup, let's scroll down the page and insert a table. In the old days of web design, and I mean two or three years ago, tables were often used for layout, but now the new web standard is to use your structural markup as the layout method and to do your styling with style sheets. Tables should only be used for data. This line, 'This is a table,' is where we want to insert our table. So put your I-beam at the end of this line and hit your Return key. We are going to use that Common toolbar. Up at the top, if you scan across these icons, you will see one that actually looks like a table. That's the one we want to use.

Click on that icon, this is the Table dialog box, and this is the way it opens by default. We want to create a table that has two rows, three columns. We will leave that as it is. But we want a table that will stretch to be the width of whatever our user's browser window is. The way we can do that is by typing in 100, and instead of using pixels, which is a fixed width, we will use percent. That will make it stretch or be a relative size, according to what our user's browser is open to.

Border thickness we will leave on as 1, so you can see the actual structure of the table. For Cell padding, we will put 2, and Cell spacing, we will put 2. I would like you to use the special formatted table, which would be the Top row header. If we use this table, the top row will be bold and centered, and the secondary rows will be left aligned and regular weight. Let's click on the OK button. There it goes. It's inserted right in. You could see the table has been inserted but no content.

I have already typed the lines I want you to use inside the table, so we don't have to spend time typing. Let's select this first line and do a Command+X or Cut or Ctrl+X or Cut and Paste it into the first cell. Put your I-beam in the second cell, and this is very disconcerting to first time users of tables, that these tables stretch and collapse according to what content is put inside of them. So this is what we call a collapse. Continue to paste; don't be daunted by this. Put your I-beam in the last cell and paste.

So it's Column 1, Row 1, but this should be changed to Column 2, and then finally Column 3. Let's grab our second line of text, Column 2, Row 2, do a Command+X or Ctrl+X and Cut, Paste it in, again, and again, and let's clean up some of this white space, put our I-beam in front of your name, and hit our Delete key. There we go.

One more thing. The second row doesn't read quite right. This is Column 1, Row 2, Column 2, Row 2, and Column 3, Row 2. So now we have created our table. The table tag is very complex. It has, as I said, a parent tag and then a lot of nested tags. So it helps to take a look at that. You can insert your I-beam anywhere in a table, then go down to your Tag Inspector, and you will see that there is the table tag.

If you select the table tag in the Tag Inspector, this is the fasted, easiest, and safest way to select your entire table. If I click that I-beam into the first cell, top row, notice two tags appear. One is th, which is table header. If I select that in the Tag Inspector, it selects just that cell. If I select tr, which is table row, that selects the entire top row. Again, these are the super user, fast and safe ways to select elements inside of your table.

Let's try that in the second row. I can click anywhere inside that second row. Notice this one comes up as td or table data. If I select td, that selects just that cell. If I select in another cell, it is also called a table data, and I can select just that cell. But if I want to select the entire row, the second row, I'll click on tr. It's a great way to use tables and finally, again, just to remind you to select the entire table, click on table.

This is the way I work with tables. I don't try to get in there and do all that dragging and stuff that everybody else does, it's so easy to get the wrong thing. The only time I do the dragging is if I want to do an entire column and then I just do a quick drag through. If you stop and slow down, it gets screwed up. So just remember, click, drag, let go. That's the way to use the table. Now, I want to go to Code View and we will go not to Split View, but the entire window, so you can see this easily. Because I selected the table in Design View before we came into Code View, the entire table is selected. When we have a parent tag with many tags inside of that, that is called nesting and in this case we have two nests. The parent tag is the table tag and nested inside of the table tag are two rows. So this is table row one and this is table row two.

Inside of table row one, we have three table headings, and inside of table row two, we have three table data cells. This concept is called nesting. So the td tag lives inside of the tr that lives inside of the table. It sounds a little bit like those stories you used to learn when you were four or five. Fortunately for us, inside of Dreamweaver the Code View visually shows us that nesting is occurring. So whenever you see this sort of curving, or when you see the indented tags, you can pretty much guess this is nesting, and that you have a child tag inside of another tag, inside of another tag.

Let's go back to Design View. To deselect your table, click anywhere outside of the table document. The last thing I want to show you is that inside the Properties Inspector. Remember the Properties Inspector is our new best friend. It's going to contextually change according to what we have selected, so let's put our I-beam inside the table, and let's select the table tag using the Tag Inspector. All of that information about the table now displays down here. It shows us that it is 2 Rows, 3 Columns. It's 100%. Now, we might want to change that width, maybe we only want it to be 50%. Let's try that out. Don't be afraid to use your Properties Inspector and to change your attributes, it's a way to try designing and try ideas out, and to feel comfortable and like you have some control over what you are doing. There we go, 50%.

I can try 80%. I usually choose 90%. I don't like my tables to be going from edge to edge, so 90% sets it just inside the browser window for the user. It looks good. We can change the cell padding, the cell spacing, the border, alignment, all kinds of things. For just a moment let's go back to Code View. Where did these same attributes appear in Code View? It's really important to see this. These will all be table attributes for the table tag; the width, the border, the cell spacing, and the cell padding will all appear as attributes of the table tag. It's easy to find them and you can change them quickly. It's actually as you get used to Dreamweaver easier to change them inside of the Code View than it is down inside of the Properties Inspector.

Let's return to Design View and deselect the table by clicking outside and let's get an overall view of what we have done. Our formatting and out semantic markup is looking very, very good. We are almost done. It's time to add some links.

Show transcript

This video is part of

Image for Creating a CSS Style Guide: Hands-On Training
Creating a CSS Style Guide: Hands-On Training

35 video lessons · 28082 viewers

Laurie Burruss
Author

 
Expand all | Collapse all
  1. 6m 58s
    1. Welcome
      1m 9s
    2. Objective of this course
      3m 38s
    3. Using the exercise files
      2m 11s
  2. 28m 26s
    1. Starting Dreamweaver for the first time
      3m 38s
    2. Defining a website
      4m 3s
    3. Understanding the Dreamweaver interface
      9m 43s
    4. Setting up a custom workspace
      4m 10s
    5. Setting essential preferences
      6m 52s
  3. 56m 54s
    1. Laying out a page in a text document
      3m 40s
    2. Creating and saving a new document
      3m 27s
    3. Inserting an image
      8m 22s
    4. Marking up text using the Property Inspector
      6m 48s
    5. Marking up text by hand
      9m 21s
    6. Inserting, formatting, and selecting a table
      8m 16s
    7. Creating links
      12m 26s
    8. Styling a footer
      4m 34s
  4. 22m 15s
    1. Using Modify Page Properties to create embedded styles
      12m 22s
    2. Creating links with CSS
      4m 55s
    3. Working with Code, Split, and Design views
      4m 58s
  5. 8m 52s
    1. Defining browsers to test a web page
      2m 24s
    2. Previewing a web page in a browser
      6m 28s
  6. 16m 44s
    1. Using a span tag to add a class and customize appearance
      10m 34s
    2. Using the Tag Inspector to create and edit additional styles
      6m 10s
  7. 48m 42s
    1. Exporting existing styles into an external style sheet
      7m 0s
    2. Using the CSS Styles panel to add a new style
      5m 43s
    3. Using the div tag to create a content container
      11m 8s
    4. Overriding the default browser styles
      2m 46s
    5. Applying padding and margins
      4m 57s
    6. Styling header tags
      5m 34s
    7. Creating and styling compound tags
      5m 12s
    8. Editing preexisting rules
      6m 22s
  8. 19m 36s
    1. Improving the Footer
      5m 12s
    2. Commenting a CSS style sheet
      7m 0s
    3. Creating a custom color palette
      7m 24s
  9. 3m 6s
    1. Style sheet final review
      3m 6s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a CSS Style Guide: Hands-On Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.