- Read Tutorial
- Watch Guide Video
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:
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.
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:
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.
I think it looks really professional now.