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

Setting table attributes

From: Up and Running with HTML

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.

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.

Show transcript

This video is part of

Image for Up and Running with HTML
Up and Running with HTML

49 video lessons · 25828 viewers

James Williamson
Author

 
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

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.

Join now "Already a member? Log in

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
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.