Tutorial

Since you’re brand new to HTML in general, you should probably get familiar with the a few core concepts first. I’m going to skip over a lot of common stuff here, and walk you through just what you’ll need to get comfortable making stuff here on OP, but I’ll take it from the beginning. Just let me know if anything needs further explanation.

The main thing to keep in mind about HTML is the concept of tags – tags are text codes that define how their content will be displayed, and they follow a few simple rules:

  • Each tag is surrounded by pointed brackets (< and >) with the tag type in between
  • Tags come in pairs, one opening tag, and one closing tag, with content in between
  • The closing tag is just the opening tag with a slash (/) in front of the type
  • Tags can contain parameters that take the form parameter=”value”

So, for example, you can make a paragraph that says “Some text.” using the p(aragraph) tag, and use the style parameter with the value color:red to make the text red, like so:

<p style="color:red;">Some text.</p>

And it looks like this when it’s part of the page:

Some text.

Tags can also contain other tags. This is called nesting, and it’s a key concept in HTML in general, and for using tables in particular. For example, we could take the red paragraph above, and use the span tag within, using the style parameter with the value font-weight:bold this time, to make the word “text” bold, like so:

<p style="color:red;">Some <span style="font-weight:bold;">text</span>.</p>

Which would look like this when it’s part of the page:

Some text.

Just like this, you use the concept of nesting with three different tag types to create tables. The first tag type sets up the table as a whole, and is called simply, table. The second creates a row within the table, and is called a table row, abbreviated to tr. The third creates a cell within a row, and is called table data, and abbreviated td. They’re nested within one another like this, to make a table:

<table>
    <tr>
        <td>Row One, Column One</td>
        <td>Row One, Column Two</td>
    </tr>
    <tr>
        <td>Row Two, Column One</td>
        <td>Row Two, Column Two</td>
    </tr>
</table>

Which looks like this on the finished page:

Row One, Column One Row One, Column Two
Row Two, Column One Row Two, Column Two

You can use the style parameter with various values in your table and td tags to customize the appearance of the table. For example, we can set the font for the whole table to Arial using the font-family:arial value, and make the first cell red using the color:red value on the td tag, like so:

<table style="font-family:arial;">
    <tr>
        <td style="color:red;">Row One, Column One</td>
        <td>Row One, Column Two</td>
    </tr>
    <tr>
        <td>Row Two, Column One</td>
        <td>Row Two, Column Two</td>
    </tr>
</table>

Which comes out looking like this on the finished page:

Row One, Column One Row One, Column Two
Row Two, Column One Row Two, Column Two

You can also use multiple values for the style parameter on the same tag. For instance, if we wanted to take our previous example and make the first cell both red and bold, we’d just add both the values, separated by a semi-colon (;) character, like so:

<table style="font-family:arial;">
    <tr>
        <td style="color:red;font-weight:bold;">Row One, Column One</td>
        <td>Row One, Column Two</td>
    </tr>
    <tr>
        <td>Row Two, Column One</td>
        <td>Row Two, Column Two</td>
    </tr>
</table>

Which would produce the following result:

Row One, Column One Row One, Column Two
Row Two, Column One Row Two, Column Two

Using these basic table tags, and the style parameter with it’s many values, you should be able to create tables that look any way you like. Give it a try!

Tutorial

Sanction of the Athar ChainsawXIV