Table-element

Tablet element is one of the oldest elements in HTML-language. Before CSS documents this one of the ways to create layer elements when designing your web site. Now a days designers might use more and more div-elements or class-elements to modify the page. This article is about making basic table, but with this you should be able to create more complex web pages as tablet-element as your tool.

Tablet, simply to look at

What do you want to table to be, I mean should it be very complex, or should it be easy to follow?. Well it’s all up to you what kind of tablet you do, but basics of making it all are the same. When making tablets you use elements <table>, </table>, <tr>, >/tr>, <th>, </th> <td> and </td>  . So what stands for <tr>-element? It’s meaning is that it makes one row. <td>-element stands for one normal cell and <th>-element is title cell.

How to use them

This is one of the trickiest and most frustrating things when you try to create your web site I think. It’s still not bad, but when using this you have to think twice before doing anything. Let me show you example. How many rows are in this picture.

How many rows?

How many rows?

The right answer is………..
A.) 3
B.) 7
C.)4
D.)3,5

The right answer is 4 rows. Here is the picture that explains all the rows.

There are 4 rows.

There are 4 rows.

As you can see it’s not always so obvious to find out even this simple table. At the first time I answered 3 so quess I did something wrong. Nevertheless I show you how to make first the simple tablet and in my next article I show how to make this kind of table.

Simple tablet example

Let’s make something easy first so we get used to table-element. One way to use this is to create simple category of items. In this Example I Show one way to do tablet. So this is the script that you need to use

<!doctype html>
<html>
<head>
     <title>Tablet</title>
     <meta charset="iso-8859-15">
</head>
<body>
      <h1> MR. Rosswels goods </h1>
      <table border="5"> <!--COMMENT:see the border in browser-->
           <caption>Price List</caption>
           <tr> <!--COMMENT:first row-->
                <th>Item name </th>
                <th>Price </th>
                <th>Ammount </th>
                <th>Quality </th>
           </tr>
           <tr> <!--COMMENT:second row-->
                <td>Rope 10metres </td>
                <td>20€ </td>
                <td> In stock 200 pieces </td>
                <td>High </td>
           </tr>
           <tr> <!--COMMENT:third row-->
                <td>Shovel </td>
                <td>15€ </td>
                <td>In stock 44 pieces </td>
                <td>Low </td>
           </tr>

    </table>
</body>
</html>

and with that you should get something like this

fgfg

Tablet example

Summary

Well doing these kinds of tablets are easy. They look nice and you can edit it with CSS and make it more beautiful. In next article I show some advanced table editing.

**Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. GNU License 3 (link)**

– Tuomas Törmä

Sources

  • Introduction to Web Site Development lectures At Haaga-Helia spring 2013 teacher Mirja Jaakkola.

Leave a comment