How to Customize Row Sizes in HTML Tables
This lesson provides a step by step guide for customizing the size of rows in HTML tables.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

This is the last video in the HTML tables section, and in this one, we're going to cover the row span.

You're already familiar with how to use column span, where you can customize your columns based on the data that needs to be displayed. A row span is also similar, except that it is applicable for rows. For example, if you have quite a few notes to add, row span would be a handy element.

Let's now add another element to a row, like this:

large

Though this looks ok, it's probably not the best way to implement it. Ideally, I'd want that element to take up all the rows underneath it. For this, we'll use the row span element.

<td rowspan = '6'>Updated Daily</td>

Now, our element looks much better.

large

Notice that there's no style that goes through it, and this is because this is a giant cell that takes up six rows Ideally, I'll have the colspan to 3 and rowspan to 7, so the entire table looks complete, like this:

large

We can also customize the style for this element by giving it an ID. I'm going to call this ID status, but you can give whatever you want. Inside the selector, I want to center the text.

You can even call this class for any element that needs to be centered. To do this, I'm going to remove the ID, and instead have a class called center-table-text, so I can use it for everything. Next, I'll add this class for all our edit and delete content.

large

I think it looks really professional now.