A Quick And Easy Introduction To Tables

Tables are a great way to present certain kinds of information to users. With the advent of CSS, some webmasters are swearing off of tables, but I think they still have their place. While they may be a little clunkier for designing the general layout of your page, they are, at least for the novice, easier to implement, making them great for when you just want to present your visitors with a simple grid of information.
How to Do It

First we need to tell the browser that we are going to be putting a table here. The tag for this is simple:

Once we have started our table, we build it up, row by row, and within the rows, column by column. It works almost like knitting, building up each row with stitches or columns, and then moving along to the next. Until you’re more practised with tables, you may want to draw out your table on a piece of paper first so that you have an easy visual to go from. To start your first row, you use: Now you need to put columns within that row. If you want a table that is three columns wide, you would set up three cells now (a cell is just a fancy term for one of the squares on your table’s grid). For example, to have three columns, each with the name of a different animal in them, you would use something like: Dog Cat Fish You can keep going with as many cells as you’d like. Just remember that a browser window is only so wide, so if you go on too long, you’re going to make your visitors scroll horizontally to see all your information. As a general rule of thumb, if it isn’t all going to fit in the window, you want to make the table taller than it is wide, since users are more used to scrolling vertically with the web. Now that you’ve finished your first row, you need to tell the browser this, so you end the row with: Now let’s add another row that says whether these animals have fur or not. First we tell the browser we’re putting in a new row: Then we add in the cells. You want to make sure you put in the same number of cells as you have in your first row, or your table can start to look a little wonky. If you need to leave a cell blank, you can just put: without any contents in between. But in this case, we have information for all our cells, so we’ll put in: Fur Fur No Fur And again, we have to tell the browser that we’re done our row: You can keep adding more rows by building them up the same way. In this case, we’ve done all we set out to do, so we want to tell the browser that the table is done: And that’s it. We’ve built a table that is two rows deep with three columns across. Here’s what your final block of code would look like: Dog Cat FishFur Fur No Fur