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

Table basics

From: HTML Essential Training

Video: Table basics

Tables are a very useful feature in HTML. Let's take a look at how they work. We will start by making a working copy of tables.html here in the chapter 14 folder in your exercise files, and I will rename that tables-working,HTML. I am going to open that in my text editor. We will just scroll through this for the benefit of folks who are typing along at home, and in a moment we will explain all of that. Let's open it in the browser here. And that's what the table looks like. Now you can see that it's not very recognizable in its native state.

Table basics

Tables are a very useful feature in HTML. Let's take a look at how they work. We will start by making a working copy of tables.html here in the chapter 14 folder in your exercise files, and I will rename that tables-working,HTML. I am going to open that in my text editor. We will just scroll through this for the benefit of folks who are typing along at home, and in a moment we will explain all of that. Let's open it in the browser here. And that's what the table looks like. Now you can see that it's not very recognizable in its native state.

One of the first things that I always like to do when I am designing a table is to turn on the borders so I can see where all the rows and columns are. So I am going to come in here and I'm going to create a style, and all it's going to do is say table and td and th. I will explain what all of that is in just a moment here. Border: 1px, solid black. Now when I reload this in the browser, you see we get borders up, so we can see where the dimensions of all the elements of the table are.

So now let's go ahead--and let me see how much of this I can see on the screen at the same time as I can see the code. That's always useful. So now let's take a look at the table and see how it works. We have a table element, which starts right there, and it ends all the way down there on line 56, and that contains the entire table. So if we are looking at the table over here in the browser, you see that outer line. That's a table, and it actually also includes this line above this that says Some Favorite Albums. That's called a caption, and that's the first element inside the table.

It needs to be before there are any rows of data, and these tr elements are the rows. The first thing you have in there is a caption, if you have a caption, and there's a CSS option I will show you later that can make it show up on the bottom instead of on the top. Then we have the rows, and you see here these tr elements and if I collapse that, you see that it's that much. It's from line 27 to line 31. That's one row. So that's everything here: Title, Artist, Comment. So there are a total five of them. There's that one and then there's this one, that one, that one, and that one, and those are all the rows of the table. And the row contains cells, and there are two types of cells.

They are the header cells, which are default formatted bold like these ones up there, and there are the data cells. So the header cells are th elements, and data cells are td elements. And these are all containers, and what they contain is the content of the cell. So th element contains the word Title, and you see it up there; this th element contains the word Artist, and you see it there; and this th element contains the word Comment, and you can see that there. And these are the td element.

So that's table data. That's the one over here it says Electric Ladyland, and there's table data, and there's table data. So it's all organized on the screen here in rows and columns. So the tr elements contain a row, and then each of these cells inside the row are organized horizontally into columns. So you have rows and columns and rows and columns and rows and columns. Now you'll notice that the formatting on the table is still pretty rough. One of the first things that I notice when I look at this is that each of these elements has its own border, rather than sharing borders with the elements that are next to them. And this is actually, in my view, this is unsightly, and I wouldn't have this be the default if I were the king of the world.

But I am not and that is the default. So let's see how to change it, because you are going to probably want to change this, one of the first things you do every time you format a table. So I come in here and I go on my CSS and I use a table selector, like that, and I say border-collapse and I change it to collapse. And when I save this and come over here into the browser and reload, you will notice that now all of those borders are collapsed, so each of these cells in the table shares a border with the cell next to it in each direction. And that, to me, looks more like what a table is supposed to look like.

So the default value for the border- collapse property is separate, like that. So if I save that and reload, you see we get the other behavior, and if I put it back to collapse and reload, you see we get the behavior that we are looking for here. Now while I am in the table selector, I am going to go ahead and also change the font. I like a sans-serif font for my tables. And tahoma is one in particular that I think is very attractive for this purpose. Now that table is starting to look a lot better. See, I got a bug.

I need to take out that closing bracket there, because my border-collapse wasn't working, and there. That's much better. Another thing I like to do to my tables is I like to have them have alternate colors for each row. So the way you do that-- so I am going to come down here into the table itself and for each of these rows, I am going to give it a class. And I am going to name them odd and even, so the odd rows will be one color and the even rows will be another color. Then I come up here in to the CSS and I say tr. Remember tr is our rows, odd background color.

#ddf;. And then I am going to do the same thing for even and call that one #def, and then I want to create one also for the header rows. You notice I don't need a class for this row because these header cells, they have a different element name. So I am going to say th background-color #cef. Now when I save this and reload it in the browser, you see we now have different colors. We have this slightly brighter blue for the header row, and then we have these alternating colors for the other rows.

Now I want to show you a few other things we can do in formatting, in particular margins and padding. If you're not familiar with the box model in CSS, you will want to take a look at my CSS for Developers course here on lynda.com. But margins happen outside of the borders, and padding happens inside of the borders. That's the long and short of it. So if I say td margin 3pt, you would expect this margin to be outside of the borders, but since the borders are collapsed, it actually doesn't work at all.

It doesn't change anything. If I change this border collapse to separate, now you'll see that that has some effect. I am going to go ahead and turn the border off so we can start seeing these effects a little bit better, and I will reload this. So if I make this border collapse again, you will see that those margins go away. So instead, I am going to give a padding. Padding happens inside of the borders, and when I reload, now you see we have a little bit more room for each of these table elements. Finally, you see the caption defaults to above the table.

If we want that caption to go below instead, we can style the caption with a property called caption-side, and its possibilities are top and bottom. It doesn't have left and right. So I am just going to say bottom here, and we will save that and reload and we see that the captioning now comes at the bottom. So we have a pretty decent-looking table at this point. In HTML5, all of the table formatting options have been removed from the HTML, so we are encouraged to use CSS to format our tables. As you can see, the CSS formatting options for the tables are very powerful and rich and flexible.

Show transcript

This video is part of

Image for HTML Essential Training
HTML Essential Training

82 video lessons · 98508 viewers

Bill Weinman
Author

 
Expand all | Collapse all
  1. 5m 24s
    1. Welcome
      56s
    2. Using the exercise files
      1m 37s
    3. What you need to know about this course
      2m 51s
  2. 22m 0s
    1. What is HTML?
      4m 12s
    2. Examining the structure of an HTML document
      7m 50s
    3. Understanding tags and containers
      6m 4s
    4. Exploring content models in HTML5
      2m 23s
    5. Looking at obsolete elements
      1m 31s
  3. 27m 19s
    1. Understanding whitespace and comments
      3m 53s
    2. Displaying text with paragraphs
      3m 37s
    3. Applying style
      8m 5s
    4. Using block and inline tags
      6m 34s
    5. Displaying characters with references
      5m 10s
  4. 16m 36s
    1. Exploring the front matter of HTML
      2m 9s
    2. Applying CSS to your document
      3m 59s
    3. Adding scripting elements
      4m 54s
    4. Using the meta tag
      3m 34s
    5. Optimizing your page for search engines
      2m 0s
  5. 24m 59s
    1. Controlling line breaks and spaces
      2m 46s
    2. Exploring phrase elements
      1m 44s
    3. Using font markup elements
      1m 5s
    4. Highlighting text with mark
      1m 29s
    5. Adding headings
      1m 38s
    6. Using quotations and quote marks
      3m 2s
    7. Exploring preformatted text
      1m 45s
    8. Formatting lists
      2m 28s
    9. Forcing text direction
      3m 49s
    10. Suggesting word-break opportunities
      2m 29s
    11. Annotating East Asian languages
      2m 44s
  6. 29m 15s
    1. Introducing CSS
      55s
    2. Understanding CSS placement
      6m 55s
    3. Exploring CSS syntax
      10m 34s
    4. Understanding CSS units of measure
      3m 3s
    5. Some CSS examples
      7m 48s
  7. 22m 5s
    1. Using images
      4m 13s
    2. Flowing text around an image
      4m 55s
    3. Breaking lines around an image
      3m 3s
    4. Aligning images
      5m 25s
    5. Mapping links in an image
      4m 29s
  8. 22m 28s
    1. Understanding URLs
      2m 41s
    2. Working with hyperlinks
      3m 28s
    3. Using relative URLs
      4m 20s
    4. Specifying a base URL
      2m 19s
    5. Linking within a page
      4m 12s
    6. Using image links
      5m 28s
  9. 17m 2s
    1. Exploring list types
      3m 52s
    2. List elements in depth
      7m 44s
    3. Using text menus with unordered lists
      5m 26s
  10. 15m 30s
    1. Introduction to HTML semantics
      4m 9s
    2. Exploring an example
      4m 56s
    3. Marking up figures and illustrations
      2m 33s
    4. Creating collapsible details
      3m 52s
  11. 11m 18s
    1. Embedding audio
      5m 19s
    2. Embedding video
      5m 59s
  12. 11m 53s
    1. Creating ad-hoc Document Object Model (DOM) data with the data-* attribute
      4m 53s
    2. Displaying relative values with meter
      2m 57s
    3. Creating dynamic progress indicators
      4m 3s
  13. 4m 49s
    1. Overview of HTML5 microdata
      1m 8s
    2. Exploring an example with microdata
      3m 41s
  14. 7m 3s
    1. Understanding outlines
      52s
    2. A demonstration of outlining
      6m 11s
  15. 13m 1s
    1. Table basics
      7m 29s
    2. Exploring the semantic parts of a table
      2m 32s
    3. Grouping columns
      3m 0s
  16. 9m 55s
    1. Frames overview
      54s
    2. Using traditional frames
      4m 26s
    3. Exploring inline frames using iframe
      2m 7s
    4. Simulating frames with CSS
      2m 28s
  17. 53m 7s
    1. Introducing forms
      10m 24s
    2. Using text elements
      10m 12s
    3. Using checkboxes and radio buttons
      2m 37s
    4. Creating selection lists and dropdown lists
      5m 14s
    5. Submit and button elements
      8m 48s
    6. Using an image as a submit button
      2m 15s
    7. Keeping context with the hidden element
      3m 0s
    8. Setting tab order
      2m 7s
    9. Preloading an autocomplete list using the datalist feature
      5m 26s
    10. Displaying results with output
      3m 4s
  18. 19m 47s
    1. Touring a complete site
      2m 14s
    2. Touring the HTML
      8m 44s
    3. Touring the CSS
      8m 49s
  19. 29s
    1. Goodbye
      29s

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