Build Your Own Business Website header image

Style Tables with CSS – Part 2, Add CSS to the Table

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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.

In this second video on Styling Tables we talk about the default styling/formatting that comes with the table in WordPress and Thesis. In order to give the table some styling you need to assign a class or id. We show you how to assign classes and then style the table contents, head and footer and discuss the type of formatting that can be added to the table. Then we talk about what the plugin WP-Table Reloaded can do with tables.

Video Transcript

Rick: And so, with that table set up and inspect the element, you can see that you know, we just have this thing called table and this formatting that we see right here, that formatting is the automatic WordPress/Thesis formatting for table because I have provided no styling in there whatsoever for this.

Okay so if you want to style this, the best thing to do is to assign a class or an id to it. So if we come back over to the… let’s see, let’s edit this page and if we go to our table and we just say id = live answers and update that, now you’ve got a class that you can hang the rest of CSS classes onto. So going back to the page and then editing CSS, we’ll just come back down here to the bottom. We can say table #live answers and we could for example, give it a background color or light red or light blue. Maybe I should just say light gray. Maybe there isn’t a light blue. Background color, table, live answers… maybe we have to say TD for that.

Okay, what am I doing wrong here? Let’s see, table id live answers table id live answers… yeah okay, I just have to use this right color. Okay so in this case now, all of the TD elements that is, all of the data elements got a background color of red. Now if you don’t want to see these white lines, what you would do to that is you would add a border collapse property. So border-collapse and then tell it to collapse and then that gets rid of those borders. Okay, border-collapse…oh, pardon me. That’s not a TD thing to do. Border collapse here is actually for the entire table. And so, if we have a background color of red now, the entire table is going to be styled with that red background color. And I believe, we can add padding here. Padding: 5px, okay… no we can’t. We have to add the padding to our TD elements. So, if we take this out and we say TD, there we go. So now, we’ve added 5 pixels of padding to that and actually, we however, have not done that to the heading. So if we wanted to do that to the heading, we have to do that to the TH elements. Okay, so now we’ve added some styling to those.

Now let’s say that we don’t want the entire thing to have a background color of red. So let’s get rid of that. But remember, we call these things… this is a head, a T head. So let’s say we want the T head to be gray. So now you can do #liveanswers and you can say background color: gray. Oh pardon me, live answers… what did I say? T head right? Okay so now, it’s got a background color of gray and if we wanted a font color of white, we can say color: white.

And then let’s say that what we want is this column here to be light gray and we want… well, let’s center all of the text for just a moment here. So we go back up to the high level live answers and we call it text align center. That will align everything about the center and then let’s say we want the weekday to be a light gray and then we want a line under each table row. So we could…so what we have to do in that case is we have to assign this table, this row or column… or sorry, not row. We have to assign this column a column class and then assign…and then style it based on that column class. So in that case, I’m just going to copy this because otherwise, I’m going to lose it. Copy that and then we’ll come back over here to edit that page and inside… what we’re going to do is we’re going to have just one column group and inside the column group, we’re going to have a column. Col class = col 1 and then go down again and we’re just going to paste this 2 more times and column 2 and column 3.

So now what we have is we have 3 columns in a single column group and we have referenced each of those columns by putting a column in this column group and then we’ve given them each a class. I typed the syntax incorrectly so it would have been an error. But now, we can style the columns using these things so let’s go ahead and update that. View the page, go back to our custom css file. Paste, oh I lost all that stuff, I forgot.

Okay so anyway, it’s #table…no, it’s table #liveanswers. And we said it was going to be border collapse and then text align center and then we’re going to do #liveanswers and that’s TD. And we’re going to get padding: 5 px. Give ourselves a little bit of space, replicate that for TH. Okay and then we’re going to give our #head… let’s see, #liveanswers T head background color: gray and then color white. And then we’re going to make this side, this column number 1 light gray. So we will liveanswers col 1… pardon me, it’s got to have a period in front of it because it’s a class. So that class and we’re going to give it background color. Let’s see, we’re going to give it a width of 100 px and we’re going to give it a background color of #efefef. Okay and then we’re going to not have that on our footer so here our liveanswer T foot is going to have a background color of transparent and it will not have a color of white. Oh okay, let’s make it or give it a background color of white. I guess maybe that’s what we need. Okay, there we go. Although, we could give it a top border, border-top and then it would be let’s see, let’s make it 3px solid. Okay and then we may as well for the rows, instead of TH we’ll say TR and we’ll say border bottom: and then we’ll do 1 px solid. And let’s let lighten it up a little bit so make it gray. There we go.

And so now, you’ve got a formatted table that allows you to access all of these different parts. You know, I should have invited you to participate in this, Heidi. I’m going to unmute you for just a moment. Heidi, do you have a microphone? Can you join in here for a second?

Heidi: I do. I’m not sure if you can hear me.

Rick: Yes, I can. Perfect. So is this what you were shooting for?

Heidi: Absolutely. I often get where I have to bring them in from a Word document and if I just paste them, they’ve got all kinds of gobbly gook in there. So what I’ve done up until now is put it in to Dreamweaver and stripped all the formatting out but then I’ve found it quite difficult to reformat it like you’ve done. So this is very helpful. In particular, I didn’t know about the column group tag. I’ve never seen that before. So that has really been useful.

Rick: Well and in fact, you could have a couple of different column groups. Actually, if you look back at the example I have here, my example has more than 1 T body right? Theoretically, these could all be one… all of these rows could be in one T body and they don’t need to be in 3. But what I was intending to do was to you know, break them out a little bit. In fact, we could do that right now. We could give some you know, bottom padding to T body so that these step away a bit from the rest of the… from each other. And so, you could apply styling to these individual T bodies and if you’ve got column groups, the column groups could do the same thing where you’d have column groups… say, you have 2 column groups. One column group had one column in it. The other column group had 2 columns in it. You could specify common styling for the 2 columns within the one column group simply by referencing that column group. Now, it’s important to understand though that the column formatting, the only thing column formatting can do is it can format the width of the columns. It can format border and it can format background. It cannot format font style or text alignment. And if you wanted to do that….say you wanted all of these names to be bold. You know, you pretty much need to add a class to this. So class equals you know, and then whatever your class name is, dark text or whatever, right? And then add that to each of these. The same thing is true for alternating colors. You know, you could do TR and then class equals alt.

Heidi: Okay, I get that.

Rick: And then you know, do that every other one, which point you can have alternating stripes you know, in the tables.

Heidi: I think this has been very useful because now I can make the table match the style of the website very easily. So this has been really very useful.

Rick: The one thing to bear in mind is that the text editor, the way of mangling HTML and so this is actually not a very complicated table. And so, this kind of a table probably will survive you know, the editor. But the old style tables where they had column rows, where they you know, you specify the column spin for DD and all the rest of that stuff. Those things will just fall apart in the HTML editor or the WordPress editor. And so, the solution to that is to use a plugin that then slips a… and then you use a short code to insert it. And the plugin that I like to recommend is Table Reloaded or WP Tables Reloaded and I’ve got a couple of videos on here about how to use it. It’s quite powerful but I don’t believe there’s any way for you to cut and paste into it. So if you really want to be able to cut and paste a table then I think you’re… actually, I’m going to take a look at that and maybe it will import a CSV file that will allow you to turn that into a table. But in that case, you have even more control over it because then it gives you javascript for sorting a table and that kind of stuff which is kind of cool but…

Heidi: Yeah.

0 Comments… add one
0 comments… add one

Leave a Comment