Build Your Own Business Website header image

Using a Table to Create a “Skin” for a Video Player

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This member is using a table to create a frame (or skin) around a YouTube video player. Unfortunately there are gaps between the table rows which prevent the frame from looking right. We discuss the use of tables for layout purposes and how a table needs to be created in order to perform this task. We also discuss other ways of accomplishing this without using tables.

Video Transcript

Let’s go over here to this. Okay so yeah, let me preface this by saying this is a horrible idea. I know you don’t want to be told this but tables are dismal at being used for layout and to create our frame for a video like this, using a table has got to be the hardest possible way to do it.

Now actually, it sounds like you do have a microphone or somebody does. I hear some… it sounds like somebody’s talking in the background here.

Did you mute me, Rick?

Oh I guess I didn’t. No, no that’s what it was. There we go, now you’re muted. Perfect. Okay so the thing is that if you want to still use a hatchet to do the job that was designed, that a pocket knife was designed for. That is if you want to continue to use tables for this then the way to do that is you need to add classes to these tables, these table elements so that you can give everything explicit sizes. And you probably also not put images in them but you probably ought to make the images background images rather than inserting the image inside the table itself. You should give it a class, give that class a background image and then specify the size of the table.

So for example you know, if you look at your table, it’s got a table id so you know, you can address the whole table. But it’s hard then to take this… take the top table row or take the middle table row or take the bottom one or take this TD in you know, in that corner. You just about want to take this TD and say class = top left corner and then this TD is class = top and then class = top right corner and so on and so forth. So that you can then explicitly set the size for each one of these things because there isn’t… without having something to hang on to here, that is without having classes assigned to these elements, there’s just no way for you to control how a table behaves. Because the thing is that you’ve already sort of observed this in your question. A table without any class assigned to them just goes to the default behavior of the browser. And so each browser’s going to treat unformatted tables differently and really, having this inline formatting doesn’t really constitute formatting because it just doesn’t really work that way.

So what I would suggest however, there is a way to do this that is not backwards or is not using technology from you know, 1996 in 2011. And the way to do that would be to just give this, just wrap this in a div. So you would have a div class equals such and such that you would wrap around this YouTube embed code and then you would give that div a specific height and width and a background image that would include these parts. But these parts would be assembled together into a single image.

In the absence of that you know, this is done presumably because… okay, I won’t presume why you did it this way but theoretically you know, you can have an image that expands to fill the space of the video is bigger than this image here expands. And if it’s bigger than this direction, this one expands. Now that’s naturally not the way you have it set up so it won’t do that. If this is you know, bigger in either direction, these images won’t stretch to accommodate that.

If they were background images, you could do that theoretically. You know, usually though, the width of these things is pretty well fixed and what I’ve done in the past is to have a wrapping div that had one background image and then I would put a div inside of it that would be after the video embed that would have the bottom piece. And then I would make this image you know, a lot longer so it would potentially expand to fill whatever space is needed there. And actually I think I could show you an example of that. I guess I don’t have an example of what I was thinking of which is this box that expands to wrap whatever size the element is comprised of background images.

But nevertheless, that’s how I would do it. I would simply create a background image the size you want. I would save it as… I would have the background color be white or a solid color whether it’s black or white… whatever… that is the space inside the frame. And then I would use a GIF or a PNG as the basis for that image so that this solid color you know, a GIF or a PNG of a solid color actually has a very low size even if it’s a great big image because the GIF and the PNG don’t give you a pixel by pixel description of the color. It gives you a you know, a color and then a length and a height of the space it’s filled with that color which means that it takes a very small image to make a big solid color image… so in a GIF or a PNG. So you could keep your image size down by using a GIF or a PNG and putting a solid color in the middle and then just having image the size you wanted. Using a background image inside of that div and then you would give it… that div you would give padding to the left of… I think you said… I think this is 55 pixels and then to the right of 23 and to the top of 23 and the bottom of 23. And you give it that padding and then what will happen is this will you know, fill up the rest of the space.

Would you maybe jot me a note here if that makes any sense to you at all? Okay so anyway, try doing it with a background image throughout the table. Table’s not the right tool for the job. If you need to use the table anyway then give each table element explicit classes so that you can write the CSS that defines the size of those table elements and that way, you could have control over the actual size of the table and those spaces that you see.


1 Comment… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
1 comment… add one
  • Dennis OBrien July 27, 2011, 9:35 pm

    Sorry Rick I had a BSOD this day and did not get to see this. But still I sort of understood. I will download the video and and see what I can figure out. I’m also going through the css postioning videos which might give me a better understanding.

    And yes it is old school thinking but I didn’t know any better at the time. It’s been 10 years since I touched any of this sort of thing. And Australia has always been behind the rest of the world until they found out we don’t actually ride kangaroos….we eat both our national emblems with crocodile for entree 🙂

Leave a Comment