How to Make a Table

Share


Contents

Introduction

There are two basic ways to make a table on a wiki

  • First, you can use standard HTML coding
  • Second, you can use "WikiTable" coding

This article is about using HTML coding. This is being developed, and at the moment this is a pretty simple presentation. To see the actual table making code you need to open up each of the following sections, as you get to them, in edit mode. If you want, copy the code you are working with to the sandbox or to your user page, where you can practice without messing up the tutorial. You'll need to practice with this to get the hang of it.

To Start

To start a table,

place <table> at the top of the area where the table is supposed to appear.

place </table> at the spot where the table is supposed to end.

Everything you want to do with the table goes between the above two bits of code.

Add a row

Each table is built up of a number of rows composed of one or more cells.

place <tr> where you want the first row to start.

place <td> where you want the first cell.

Add some more <td>'s to add more cells.

You now have a row of cells---with nothing in them

Add data

To add data to the cells just type something in after each <td>

Results

You should now have something that looks like this:

Something Something Else Another something

Ugly, Huh!? See next step.

Adding border

The above gave you a bad looking table---not because you did anything wrong, but because I didn't tell you to include the code for that critical part of a table--cell borders To add a border around each cell, you need to add border=1. The first line of code should look like this:

<table border=1>

That will place a simple border around each cell.

Something Something Else Another something

Much better.

If you use another value instead of "1", you'll get a different effect. Try it.

More Rows

The above gave you a table consisting of one row with three cells. To get a table with two rows, you need to add another set of <tr> and td's

Something Something Else Another Something
Something 2 Something Else 2 Another Something 2

More Rows and More Cells

You can keep going as much as you want, making bigger and bigger tables.

Something Something Else Another Something XYZ ABC
Something 2 Something Else 2 Another Something 2 XYZ 2 ABC 2
Something 3 Something Else 3 Another Something 3 XYZ 3 ABC 3
Something 4 Something Else 4 Another Something 4 XYZ 4 ABC4

Beautiful, No? Well, not really, These are pretty bland tables. We can change that with a bit of color

Adding Color

Color to cells is added with a bit of code inserted either into the code that starts a row, (which makes the entire row a certain color), or to the code that produces an individual cell (which makes only that cell a certain color. In either case, the code used is bgcolor=name. Where name is one of a number of possible colors. There's a list of the color names you can use here (There are other ways to do this, but that's more complicated.) Open this section for editing to see the code used to do this.

The code to make a row turn blue is

<tr bgcolor=blue>

To make an individual cell turn blue:

<td bgcolor=blue>

Here's how a table might look with some color.

Something Something Else Another Something XYZ ABC
Something 2 Something Else 2 Another Something 2 XYZ 2 ABC 2
Something 3 Something Else 3 Another Something 3 XYZ 3 ABC 3
Something 4 Something Else 4 Another Something 4 XYZ 4 ABC4