Start learning with our library of video tutorials taught by experts. Get started

Up and Running with HTML

Setting table attributes


From:

Up and Running with HTML

with James Williamson

Video: Setting table attributes

Tables have multiple attributes that allow you to modify certain visual aspects of the table itself. Although most of these attributes have been deprecated--meaning removed in HTML5--it's important that you know about them, what their functionality is, and when it's appropriate to use them. And to sort of demonstrate those attributes we're going to be working with our sample table here. I'm back in tables.htm, this time from the 05_03 folder. For the most part, our table is exactly the same, but I'm going to look it in a browser real quick here to show you that we have a new row down here at the bottom.
Expand all | Collapse all
  1. 2m 12s
    1. Welcome
      55s
    2. Using the exercise files
      1m 17s
  2. 29m 30s
    1. Learning HTML
      2m 47s
    2. Choosing a code editor
      5m 2s
    3. Exploring basic HTML syntax
      8m 18s
    4. Do I need to learn HTML5?
      5m 6s
    5. Exploring HTML references
      8m 17s
  3. 35m 40s
    1. Exploring an HTML document
      5m 19s
    2. Working with doctype declarations
      4m 3s
    3. Examining the document head
      8m 20s
    4. Looking at the document body
      3m 21s
    5. Adding document structure
      8m 52s
    6. Lab: Coding a basic page
      3m 9s
    7. Solution: Coding a basic page
      2m 36s
  4. 1h 23m
    1. How does HTML format text?
      5m 51s
    2. Adding headings
      7m 24s
    3. Formatting paragraphs
      4m 54s
    4. Controlling line breaks
      3m 50s
    5. Creating lists
      10m 37s
    6. Emphasizing text
      6m 42s
    7. Displaying special characters
      5m 8s
    8. Controlling whitespace
      4m 35s
    9. Inserting images
      9m 20s
    10. Lab: Controlling page content
      13m 57s
    11. Solution: Controlling page content
      10m 55s
  5. 31m 54s
    1. Linking to pages within your site
      6m 45s
    2. Linking to external pages
      3m 2s
    3. Linking to downloadable resources
      2m 25s
    4. Linking to page regions
      8m 0s
    5. Lab: Creating Links
      5m 57s
    6. Solution: Creating Links
      5m 45s
  6. 40m 27s
    1. Examining basic table structure
      5m 10s
    2. Adding content to tables
      6m 20s
    3. Setting table attributes
      7m 42s
    4. Adding table captions
      4m 3s
    5. Defining table headers
      2m 13s
    6. Making table data accessible
      5m 46s
    7. Lab: Building tables
      4m 13s
    8. Solution: Building tables
      5m 0s
  7. 43m 23s
    1. Understanding the relationship between HTML and CSS
      4m 58s
    2. Creating inline styles
      4m 53s
    3. Exploring the style element
      5m 13s
    4. Basic font styling
      9m 24s
    5. Changing color
      4m 55s
    6. Taking styles further
      5m 24s
    7. Lab: Controlling basic styles
      5m 10s
    8. Solution: Controlling basic styles
      3m 26s
  8. 5m 44s
    1. Next steps
      2m 56s
    2. Additional resources
      2m 48s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Up and Running with HTML
4h 32m Beginner Oct 19, 2012

Viewers: in countries Watching now:

This course is designed to quickly lead you through the steps of building an HTML website, from creating a new page to building links and tables. Author James Williamson simplifies the coding process, with straightforward steps you can recreate on your own. The course explains the basic structure of an HTML document, shows how to add text and images, and introduces font styling with CSS. James also offers a bonus design challenge at the end of each chapter, where he asks you to think of a solution before offering his own.

Topics include:
  • Choosing a code editor
  • Coding a basic page
  • Adding headings
  • Formatting paragraphs
  • Creating lists
  • Inserting images
  • Linking to internal and external pages
  • Linking to downloadable content
  • Building tables with headers and captions
  • Creating inline CSS styles
  • Changing the color and font of your text
Subjects:
Web Web Design Web Development
Software:
HTML
Author:
James Williamson

Setting table attributes

Tables have multiple attributes that allow you to modify certain visual aspects of the table itself. Although most of these attributes have been deprecated--meaning removed in HTML5--it's important that you know about them, what their functionality is, and when it's appropriate to use them. And to sort of demonstrate those attributes we're going to be working with our sample table here. I'm back in tables.htm, this time from the 05_03 folder. For the most part, our table is exactly the same, but I'm going to look it in a browser real quick here to show you that we have a new row down here at the bottom.

It says, "Learn more about tables from the HTML5 specification," and then the other two table cells there are empty. The first thing I want to do is go back up to our opening table tag, because this is where, if you're going to use attributes on your table, you'll put the bulk of them, is up there right on the opening table tag. Now the one we have up there right now is the border attribute, and it's still available to you in HTML5. They've modified it a little bit because they basically said if you're going to use it at all, then you're only going to use values like the value 1 or an empty literal string, which I don't know what that does for you. But they've taken away the ability to do either 0 or then 1 and then the any higher number, which would represent the width of the border.

And that's the way it was in HTML 4 and below. Now the thing that you need to understand about all the attributes that I'm about to tell you, in terms of, like, oh this has been removed from HTML5, here's the thing: browsers are going to support the HTML 4 syntax for the foreseeable future. If you're going to use these attributes, the browser will still honor them, just to let you know. The first thing I'm going to do is add two more attributes to our opening table tag. The first one is going to be cellspacing and I'm going to set that value to 0, and then the second one is going to be cellpadding and I'm going to set that value to 0 as well.

Now these are HTML 4 attributes that are not available in HTML5 any more, but as I mentioned, browsers still support them. Okay, so what are these and what do they do? cellspacing is the space between the table cells. Right now it's set to 0 and that means that the table cells are going to butt right up against each other, only separated by whatever border you have on them. If I up this value--let's say I take it to a ridiculously high number like 20, so we can really see this-- if I save this, go back into my page, and refresh it, you can see these table cells are starting to push away from each other by about 20 pixels.

Even though that yes, hey, this doesn't exist in HTML5, you'll notice that modern current browsers still support this property and they will support it into infinity. The reason cellspacing is so intriguing is you're suppose to handle all of this stuff through CSS, but support for the use of margins, which controls the amount of space between elements in CSS, doesn't or hasn't extended to table cells. So for the longest time if we wanted to control that at all, we had to control it through cell spacing. So for certain user agents cellspacing is still a very valuable way of spacing table cells if that's what you want to do.

Now cellpadding controls the amount of space within the table cell. So if I go to cellpadding and let's say I put that on 20 as well, if I save that and preview my table, now you can see the table cells are still butting right up against each other, but they have a lot more space on the inside of them. Now, I recommend controlling both of those properties through CSS. But here's the thing: in older browsers, if you did not explicitly set cellspacing and cellpadding to 0, what you ended up with was whatever the default for that particular user agent was, and in most browsers the value was, oddly enough, 1.

So if you didn't set it, you got a little bit of spacing between your table cells that you really didn't want. You can certainly, especially in terms of cell padding, overwrite that value through CSS, but what if you're not controlling it through CSS at all? You would end up with those defaults. I've been in the habit, for a long time, of putting cellspacing and cellpadding at 0, and there's nothing wrong with you doing that. Just because this is not the HTML5 specification doesn't mean that you shouldn't do that because again, it's still supported in all of the browsers.

If you want to do that, go right ahead; if not, realize that in older browsers you might end up with some default values that you didn't really want. One value or one attribute that I really don't recommend you use anymore is width, and we could use width to set an explicit width on the table. We can use pixels. For example, I could say set the width of the table to 450 pixels and if I saved and previewed that, you can see my tables now restricted to 450 pixels. I can also use percentages, so I can come and say, okay, I want to set width to 80%.

So if I save that and test it, yes, indeed, now I get 80% of the page now taken up by the table. You might be asking yourself "well, if he doesn't recommend that you use it, why in the world am I even showing it you?" Because number one: it's still supported in every single browser out there and every single user agent. And number two: there will be some times when you don't have access to CSS. Let's say you're writing an HTML email, for example, and you're sending it to older clients that may not understand CSS. It's nice to know that these attributes exist and that you can take advantage of them.

So I don't recommend you use it, but there it is if you need it. The last attribute that I'm going to show you guys doesn't go up on the table tag itself; it goes down on the table cells. If I go back to the browser, let's focus on that bottom cell. "Learn more about tables from HTML5 specification" is a long string of text, and it is stretching the table cell that it's inside of, which is actually causing us some spacing issues above this, because our tags are all very small, and so because we have this really long line down here, it's causing all this empty space.

The table cells beside it are empty as well, which is causing some weird spacing below that. What would be really nice is if we could make that bottom cell just go ahead and span, or merge if you will, with those other two cells, so that the top part of our table could go back to being nice and orderly. Thankfully, we have attributes that allow us to do that. We have two attributes that we can use to merge cells, and they're rowspan and colspan. Now these two attributes might not work exactly the way you think they do. rowspan actually works vertically, because you're spanning rows, whereas colspan works horizontally because you're spanning the cells within the column.

What I'm going to do is right here where it says, "Learn more about tables from the href," inside that table data cell I'm going to go ahead and do colspan and I'm going to set colspan to 3, because I want this to span three table cells. Now, the real trick to using this is if it's going to span three cells, that means it's going to take up the space of three cells. I now have two table cells that really need to get out of the way, so I'm going to go ahead and get rid of those. And now this one table cell down here on the bottom, because it's being colspanned to three table cells, it's going to fill up the entire bottom row.

So if I save this, go back to my browser and refresh that, we can see that now we just have the one table cell in the bottom, we have merged the other two in with it, and now spacing above it goes back to being semi-normal. Just remember, some of the attributes we've used so far in this exercise are now removed from HTML5, but it's really important that you know about these guys because support is going to continue for those attributes for the foreseeable future and in instances where you can't rely on styles, they can be extremely helpful.

There are currently no FAQs about Up and Running with HTML.

Share a link to this course
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.
Upgrade now


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.

Upgrade now

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 Up and Running with HTML.

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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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.