Tables

First we’ll look at tables. Tables are created using a combination of four different tags: <table>, <tr>(table row), <th>(Title/heading cell), and <td>(normal table cell). Let’s take this in 3 steps.

Step 1

<table>
  <tr> </tr>
  <tr> </tr>
  <tr> </tr>
</table>

Figure 1.

First we define a table area by using the table tag(<table> </table>). Naturally, everything related to the table is put inside these two tags.

Step 2

Then within this tag we define the rows in our table(See Figure 1). As you can see, we just added three rows to our table.

Step 3

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

Figure 2.

Add the cells within each row(for the example we add three cells to each row). In our first row, we want these cells to show up as headers for each column, so we use the <th> tag. Then in each of the remaining two rows, we’ll use regular table cells(<td>). For the sake of the example I’ve thrown in some numbers as sample content. Figure 2 shows the code, and Figure 3 shows the resulting table.

Lists

Lists can come in two primary different styles: Ordered Lists, and Unordered Lists. Unordered Lists tend to be more popular, and put a bullet in front of each list item. Ordered Lists place a number in front of each list item.

<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>

<ul>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 6</li>
</ul>

Figure 4.

The tags used for these lists are <ol>(Ordered Lists), <ul>(Unordered Lists), and <li>(List Item). The <li> tag is used within both list types.

Similar to the table tag, the <ol>, or <ul> tags are used to define a list area, and nested inside them is a group of <li> tags which define each item in the list. Figure 4 shows the code for the lists shown in Figure 5.

Atrributes

As we saw with images and anchor links, sometimes additional information can be included within a tag. These are called attributes and always contain two pieces of information, the name and a value associated with it. They are formatted like this: name=”value” . You can find references online that detail what attributes can be used for any given tag. We will look at one commonly used one, that works with most tags. This will bring you up-to-date on the three most common attributes(src, href, and class).

<p>
  Paragraph 1
</p>
<p class="president">
  Paragraph 2
</p>
<p>
  Paragraph 3
</p>

Figure 6

The class attribute. This one is widely used for design and styling purposes. It can contain any alphanumeric value, with no spaces. Using a class variable assigns an area in your HTML page that a web designer can use CSS(future tutorial!) to apply styles such as colors, text styles, and backgrounds selectively.

Take a look at Figure 6. You will see three paragraphs with some random text in them. The middle paragraph has been randomly assigned a class of president. Now a knowledgeable web developer can style that paragraph differently from the rest. Let’s say he adds a dark background to it and changes the text color to red. The final result would then look something like Figure 7.

Paragraph 1

Paragraph 2

Paragraph 3

Figure7

Summary

Hopefully, this brief tutorial helped you grasp some of the concepts surrounding HTML. Looking at a long page full of HTML markup can seem very intimidating, but it’s important to look at the page not as a whole, but rather as a collection of extremely simple parts. This makes things so much simpler, and easy to understand. Find it slow and painful to create HTML? Slow down! That’s right, sometimes the best way to speed up a slow task is to slow down, develop some good habits, and don’t waste time looking for the shortcuts.

P.S. I’m no hypocrite, this set of articles was coded by hand(and rather quickly to, I might add).

Additional Resources:

Here are few links to a few quality resources on the web to helpfully shove you on your merry way towards HTML nirvana.

• HTML Tags Cheat Sheet
• In depth HTML tutorials
• HTML and attributes reference