User:Dr. 0/sandbox

Ok. First thing we're gonna do is make a basic table. This:

Renders this:

Note the opening and closing bracket/pipe combos {| and |} and the pipe/dash |- that starts a new row.

We have to count the number of columns and rows we'll need. For reference's sake, here's the image you showed me: We'll have to separate the top table and the bottom one (more on why later). So the top one looks like it has 9 rows and 2 columns. It will look very roughly like this:

Next, let's make the lower table. It has 7 rows, 2 columns:

Now let's put them together:

Now let's make the tables the same witdh: You add all table styling that will effect the entire table right after the table opening bracket. Let's make the tables 500px wide:

{| style="width:500px;"

Style commands always look like style="parameter:value;" We add that line to both tables:

You can set widths for each column if you want. If you set the width in the top column, all other columns will be the same. Let's move the lower table second column over a bit. You can either use finite measurements, e.g. 250px, or percentages, e.g. 50%. Let's use percentages:

{| style="width:500px;"
 * style="width:70%;" | Cardio
 * style="width:30%;" | (star) (star)

Notice that when you use style commands in a row, you have to put a pipe | before the cell content.

Looks pretty good. Now let's use that same type of command to move around those columns in the top table:

{| style="width:500px;"
 * style="width:50%;" | Elliot Doherty
 * style="width:50%;" | (red icon) 90 (blue icon)85

OK. We're getting there. I don't want the Hunger line wrapping to a second line. We can make that row span both columns. We'll add the colspan command to span both columns. That will merge both cells in that line into one cell, so we'll also take away the pipe for the second cell.


 * colspan="2" | (cross icon) HUNGRY: WEAK FROM HUNGER
 * colspan="2" | (cross icon) HUNGRY: WEAK FROM HUNGER

Next we're gonna add a simple border so we can see the table better:

{| style="width:500px; border:1px solid black;"

Next we've got some magic to do on that top table for fix the layout better.