How to Add a Table to Your Website
Hello, everyone. Today’s tip is about using a table in your web design. Tables are often overlooked, despite the fact they are the easiest way, by far, to align lists of items on your website.
A common mistake by many beginning web designers is to use the space bar for moving text items around on the page. This is a web design and a graphic design no-no, using the space bar for spacing.
Now, I’m showing you here an example of a page that has been designed using a space bar. And while it’s not immediately evident, a close look will show you that the words are not aligned properly and the lines themselves are too far apart.
You’ll see here that this word looks a little bit too far over to the right. The same with this word here. And the lines themselves, because they are evenly spaced, look too far apart and they don’t look like a normal list.
Now, the solution to this is a table. And creating a table is actually pretty simple, though there are a lot of advanced features that can be learned later on. And here’s a great way to learn the code for a table.
This is a website that teaches people HTML. It’s w3schools.com and then this is the place where HTML tables are explained. This one example right here is the best way to show somebody how to design a table.
It basically uses tags, which are basically the greater than and less than signs that surround code in between. And you’ll see here that the “td” tag is a row.
And then, of course, the table itself is listed within the tag as well. Most importantly, however, is to use this as an example to set up your table. And then, of course, it would look like this example down here.
Now, once you have used this code, of course, you can align the table just by simply grabbing the table itself in your design program, whatever it might be, and moving the rows around to make it wider or narrower or however you would want it.
Now those of you that are using the Web Builder, the NE1 Web Builder that we use with ourchurch.com websites, inserting a table is really quite simple. Just simply go over here to your space bar.
And, in this particular case, we wanted to use eight rows and two columns. So you just simply put “eight” in the rows. You don’t need to worry about these other items.
And then, once you’ve got your table on here, you can just stretch it out a little bit. And you’ll want to put our agenda on here. Let’s put down here, “Monday” and then, on “Monday”, we’re going to have our little trip agenda. We want to swim. And, over here, we want to go to a theme park. And then eat with friends.
And, by the way, this is a great way to divide all sorts of different lists. In this particular case, of course, we’re using it for an agenda, but it can be used for all kinds of lists. Another day at the theme park. Another day at the theme park and then tour museum. And then, we’ll have the flight home.
And, once again, like I said before, if you wanted to make any kind of adjustments, you can simply grab the ends of the table and make adjustments.
But, the important thing is, if you save changes, you can go and simply save your changes there and your example here you can tell is much different.
Now you’ve got the lines that are a little bit better spaced. The words are spaced and the table makes it so much easier to add and subtract later on.
Most importantly, however, is because the space bar isn’t being used, then you don’t have to worry about different browsers showing different alignments. This is going to look the same each time.
So that’s your tip for today. And thank you very much for watching.