in

Learn HTML For Beginner (Part 8: Table Element)

In this chapter, we will discuss how to create tables in HTML. Tables are needed to display systematically arranged data such as report results, a list of values, and a list of participants.

HTML provides a variety of attributes and tags to create a table structure. But as you will learn later, most of these attributes have been declared deprecated/obsolete in HTML5. We are advised to use CSS to get the same effect.

Even so, for beginners, it is easier to use attributes than CSS.

So I continue to discuss how to use the ‘old’ attribute, then followed by CSS properties that can be used to produce the same effect.

Before the CSS era, tables also functioned to create layouts such as headers, navigation menus, sidebars, and footers. At present, it is not recommended to use tables to create web structures. But in order for you to fully master the development of HTML, at the end of this chapter, I also included how to create layouts using HTML tables.

Basic Structure of Tables (table, td and tr element)

To create a table, at least 3 types of elements are needed, namely <table>, <tr>, and <td>. These three tags are only a minimum requirement. HTML still provides a variety of tags that can be used to create tables.

Before creating a table, we should determine how many rows and columns the table will create. Here is the HTML code for creating a table consisting of 3 rows and 2 columns:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Table Element</title>
</head>
<body>
<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
  <tr>
    <td>Row 3, Column 1</td>
    <td>Row 3, Column 2</td>
  </tr>
</table>
</body>
</html>

As you can see, the entire table structure must be between the opening tag <table> and the closing tag </table>. The <table> tag is included in the block level element, and is displayed separately on a new line.

To create a row in a table, we use the <tr> tag (short for table row).

Next, inside the <tr> tag, the <td> tag is inserted which is a table cell (short for table data).

In the example above, I designed a table with 3 rows and 2 columns, so I need to make 3 <tr> tags, each of which contains 2 <td> tags. Here is how it looks in the web browser:

Table Element

Is this a table?

As you can see, the results don’t look like tables. This is the default web browser default view. The web browser will display the table above without a frame (border). Therefore, we need to set the table frame size.

Border Attributes

To display a table frame (known as a border), we can add the border attribute to the <table> tag. The value of this attribute is a number in pixels.

For example, border = “1” will display a table with a frame of 1 pixel, while border = “3” will produce a table with a frame size of 3 pixels.

Following is an example of using the border attribute in a table:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Table Element</title>
</head>
<body>
<h3>Border attribute = 1</h3>
<table border="1">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
<h3>Border attribute = 4</h3>
<table border="4">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
</body>
</html>
Table Element

From the above view, it should be understood that the border attribute is used to create a frame on the outside of the table. You can see the effect when I use the border = “4” attribute, and the only thing that looks bold is the border on the outside of the table. For the boundary line between rows / columns, will be set using other attributes.

In HTML5, the border attribute is considered deprecated and is not recommended for use anymore. Instead, we can use CSS with the border property. Following is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Table Element</title>
</head>
<body>
<h3>CSS with border property = 2px solid black</h3>
<table style="border: 2px solid black">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
</body>
</html>
Table Element

The above code will produce a table with a border thickness of 2 pixels and use a normal line (solid) in black (black). If you want each table cell to also have a border (like the result of using the border attribute), then the border property must be placed in each <td> tag, like the following code:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Table Element</title>
</head>
<body>
<h3>CSS, property border = 2px (table) and 1px (td)</h3>
<table style="border: 2px solid black">
  <tr>
    <td style="border: 1px solid black;">Row 1, Column 1</td>
    <td style="border: 1px solid black;">Row 1, Column 2</td>
  </tr>
  <tr>
    <td style="border: 1px solid black;">Row 2, Column 1</td>
    <td style="border: 1px solid black;">Row 2, Column 2</td>
  </tr>
</table>
</body>
</html>
Table Element

If you use CSS, actually you don’t have to set the <td> tag as the example above (which is totally ineffective). The following is a modification to the table appearance using CSS internal style:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Table Element</title>
  <style>
  table{
     border: 3px solid black;
  }
  td {
     border: 2px solid black;
  }
  </style>
</head>
<body>
<h3>CSS, property border = 3px (table) and 2px (td)</h3>
<table>
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
</body>
</html>
Table Element

As you can see, using CSS will make the HTML code ‘clean’, because we move all the display settings to CSS.

Rule Attributes

The border attribute discussed before will create a border for all table cells.

If we want to be more specific in arranging these lines (for example, for columns only or for rows), we can use the rules attribute. This attribute can be filled with values: cols, rows, none, or all.

Following is an example of using the rules attribute:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Atribut rules = rows</h3>
<table rules="rows">
  <tr><td>Title 1</td><td>Title 2</td></tr>
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<h3>Atribut rules = cols</h3>
<table rules="cols">
  <tr><td>Title 1</td><td>Title 2</td></tr>
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<h3>Atribut rules = all</h3>
<table rules="all">
  <tr><td>Title 1</td><td>Title 2</td></tr>
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<h3>Atribut rules = none, border = 1</h3>
<table rules="none" border="1">
  <tr><td>Title 1</td><td>Title 2</td></tr>
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
</body>
</html>
Table Element

However, just like the border attribute, the rules attribute is also declared deprecated and is not recommended for use anymore.

The same effect can be produced by using several CSS properties, like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
  <style>
    table{
      border-collapse:collapse;
      border-spacing:0;
      border-style:hidden;
    }
    td{
      border:1px solid black;
    }
  </style>
</head>
<body>
<h3>CSS, style for rules attribute</h3>
<table>
  <tr><td>Title 1</td><td>Title 2</td></tr>
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
</body>
</html>
Table Element

Cellspacing Attributes

To set the distance between 1 cell and other cells around it, it can be done with the cellspacing attribute. The value for the cellspacing attribute is a number in pixels. To be clearer, just go straight to the sample HTML code:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Border attribute = 1</h3>
<table border="1">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<h3>Border attribute = 1, cellspacing = 2 </h3>
<table border="1" cellspacing="2">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<h3>Border attribute = 1, cellspacing = 6 </h3>
<table border="1" cellspacing="6">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<h3>Border attribute = 1, cellspacing = 0 </h3>
<table border="1" cellspacing="0">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
</body>
</html>
Table Element

In the example above I used some cellspacing attributes to see the effect.

You can see that by default, the web browser uses the value cellspacing = “2” if this attribute is not written (as in the first and second tables).

In the third table, I use cellspacing = “6”, so that it will produce a width between table cells of 6 pixels. In the last table, I can get a ‘clean’ table effect by setting cellspacing to “0”.

Just like the border attribute, the cellspacing attribute is also declared deprecated.

By using CSS, the cellspacing attribute can be replaced with the border-spacing property, like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
  <style>
  table {
    border: 1px solid black; 
    border-spacing:5px
  }
  td {
    border: 1px solid black
  }
  </style>
</head>
<body>
<h3>CSS, border : 1px solid black, property border-spacing : 5px</h3>
<table>
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
</body>
</html>
Table Element

Cellpadding attribute

In addition to adjusting the distance between cells, we can also adjust the distance between cell border lines with text.

For this purpose, HTML provides the cellpadding attribute. The value of the cellpadding attribute is a number in pixels.

Following is an example of using the cellpadding attribute:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Border attribute = 1</h3>
<table border="1">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<h3>Border attribute = 1, cellpadding = 1</h3>
<table border="1" cellpadding="1">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<h3>Border attribute = 1, cellpadding = 6</h3>
<table border="1" cellpadding="6">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<h3>Border attribute = 1, cellpadding = 0</h3>
<table border="1" cellpadding="0">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
</body>
</html>
Table Element

In the example above I made several values for cellpadding. As seen in the first and second tables, if the cellpadding attribute is not written, the web browser uses the value cellpadding = “1”.

As with the previous attributes, cellpadding has also been declared deprecated. Using CSS, the same effect can be produced with the padding property placed in the <td> tag.

Following is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>CSS, border: 1px solid black (table), padding: 5px (td)</h3>
<table style="border: 1px solid black">
  <tr>
    <td style="border: 1px solid black; padding:5px">
    Row 1, Column 1</td>
    <td style="border: 1px solid black; padding:5px">
    Row 1, Column 2</td>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding:5px">
    Row 2, Column 1</td>
    <td style="border: 1px solid black; padding:5px">
    Row 2, Column 2</td>
  </tr>
</table>
</body>
</html>
Table Element

In the code above I use CSS inline style, so it looks ‘less tidy’. If using the CSS internal style, the table structure becomes ‘clean’ because all table display settings are moved into the <style> tag. Here is an example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
  <style>
  table {
    border:2px solid black;
  }
  td {
    padding:10px;
    border:1px solid black;
  }
  </style>
</head>
<body>
<h3>CSS, border: 2px solid black (table), padding: 10px (td)</h3>
<table>
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
</body>
</html>

Bgcolor Attribute

Setting the background color of a table in HTML should use CSS, but I will also discuss how to use it using the bgcolor attribute, because this is the fastest way. This attribute has been declared deprecated and it is strongly recommended to switch to CSS.

The value of the bgcolor attribute can be a color name (in English), or a color value in hexadecimal format (with the prefix # character and followed by a 6 digit RBG color value).

Following is an example of using the bgcolor attribute:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>

<h3>Border attribute = 1, bgcolor = red</h3>
<table border="1" bgcolor="red">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<h3>Border attribute = 1, bgcolor = aqua</h3>
<table border="1" bgcolor="aqua">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<h3>Border attribute = 1, bgcolor = #c1c1c1</h3>
<table border="1" bgcolor="#c1c1c1">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

</body>
</html>
Table Element

We can also set the color for each cell by placing the bgcolor attribute on each <td> tag, like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Border attribute = 1, bgcolor = red, blue, olive dan gray</h3>
<table border="1">
  <tr>
    <td bgcolor="red">Row 1, Column 1</td>
    <td bgcolor="blue">Row 1, Column 2</td>
  </tr>
  <tr>
    <td bgcolor="olive">Row 2, Column 1</td>
    <td bgcolor="gray">Row 2, Column 2</td>
  </tr>
</table>
</body>
</html>
Table Element

Using CSS, setting the background color is done with the background-color property, as in the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
  <style>
  table {
    border: 1px solid black; 
    background-color:#B6FF82
  }
  td {
    border: 1px solid black
  }
  </style>
</head>
<body>
<h3>CSS, border property: 1px solid black, background-color: #B6FF82</h3>
<table>
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
</body>
</html>
Table Element

Width and Height Attributes

By default, the web browser will set the width and height of the table depending on the amount of text in the table cell. For example, consider the following code:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Border attribute = 1</h3>
<table border="1" >
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt et dolore magna aliqua.</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>
</body>
</html>
Table Element

In the table above, the contents of the text in the second row of the first column are very long, so the web browser will make the width of column 1 as long as possible so that it can load all the text in 1 row. If you try to change the screen size of the web browser, the width of the table will also be adjusted.

If we want the width and height of the table ‘fixed’ in a certain size, we can use the width and height attributes.

The width attribute is used to set the width of the table in pixels and in percent (%) units. Following is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Border attribute = 1, width = 300</h3>
<table border="1" width="300">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt et dolore magna aliqua.</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>
</body>
</html>
Table Element

In the example above, I place the width attribute on the <table> tag so that the width of the table will be set at 300 pixels. However, the width of each column is set automatically by the web browser.

If you also want to set the width of each column, add the width attribute to the first <td> tag, like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Border attribute = 1, width = 300 (table), 120 (td), 180 (td)</h3>
<table border="1" width="300">
  <tr>
    <td width="120">Row 1, Column 1</td>
    <td width="180">Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt et dolore magna aliqua.</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>
</body>
</html>
Table Element

In addition to using pixels, we can also use percent units.

If we make the width = “50%” attribute, then the table will be set at 50% of the parent tag (we discussed in the parent tag in chapter 2, the DOM tree section).

Following is an example of using percent units to set the width of a table:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Border attribute = 1, width = 50% (table), 25% (td), 75% (td)</h3>
<table border="1" width="50%">
  <tr>
    <td width="25%">Row 1, Column 1</td>
    <td width="75%">Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt et dolore magna aliqua.</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>
</body>
</html>
Table Element

In the example above, the width of the table will be displayed at 50% of the width of the web browser (the parent tag <table> is the <body> tag, which by default is the size of the web browser window).

To set the height of a table, you can use the height attribute. Like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Border attribute = 1, height = 300</h3>
<table border="1" height="200">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<h3>Border attribute = 1, height = 250 (tr), 50 (tr)</h3>
<table border="1" >
  <tr height="200">
    <td>Row 1, Column 1</td><td>Row 1, Column 2</td>
  </tr>
  <tr height="50">
    <td>Row 2, Column 1</td><td>Row 2, Column 2</td>
  </tr>
</table>
</body>
</html>
Table Element

How to use the height attribute is almost the same as the width attribute, but to set the height of the line, we put it inside the <tr> tag.

The use of the height attribute for tables is not used very often. One of the goals of the width attribute is to create page layouts such as header, footer, sidebar, etc.

In HTML5, the width and height attributes are declared deprecated. The same thing is best done using CSS through the width and height properties. Following is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
  <style>
  table {
    border:1px solid black;
    width: 300px;
    height: 400px;
  }
  tr {
    height: 200px;
  }
  td {
    padding:5px;
    border:1px solid black;
  }
  </style>
</head>
<body>
<h3>CSS, border: 1px solid black, width: 300px, height: 400px</h3>
<table>
  <tr >
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  	sed do eiusmod tempor incididunt ut labore magna aliqua.</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>
</body>
</html>
Table Element

In the example above, I set the table width to 300 pixels and height to 400 pixels. The height of each row is also set at 200 px.

Align Attributes

By default, the table will be displayed in a new row on the left side of the web browser window. To change the position of a table, you can use the align attribute. The values of this attribute are left, center and right. Following is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>

<table border="1" width="300" align="right">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Pellentesque nisi justo, aliquam at finibus sit amet, 
efficitur quis ipsum. Proin ut pharetra felis.</p>

<table border="1" width="300" align="left">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<p>In posuere varius ultrices. Maecenas dictum sapien eu 
ante convallis maximus. Proin non orci dolor. Integer 
id sem sit amet leo placerat lobortis eget ullamcorper nisi.</p>

<table border="1" width="300" align="center">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

</body>
</html>
Table Element

The align attribute has also been declared deprecated and we are advised to switch to using the float and margin properties via CSS. Here is an example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>

<table border="1" width="300" style="float:right">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Pellentesque nisi justo, aliquam at finibus sit amet, 
efficitur quis ipsum. Proin ut pharetra felis.</p>

<table border="1" width="300" style="float:left">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

<p>In posuere varius ultrices. Maecenas dictum sapien eu 
ante convallis maximus. Proin non orci dolor. Integer 
id sem sit amet leo placerat lobortis eget ullamcorper nisi.</p>

<table border="1" width="300" style="margin:auto">
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

</body>
</html>

The above code results are exactly the same as the results obtained when using the align attribute.

If the align attribute is placed in the <td> tag, then the function switches to align the text inside the table cell, following an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Examples of align attributes in table cells (left, center, right)</h3>
<table border="1" width="350">
  <tr>
    <td align="left">Lorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt 
    ut labore et dolore magna aliqua.</td>
  </tr>
  <tr>
    <td align="center">Lorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt 
    ut labore et dolore magna aliqua.</td>
  </tr>
  <tr>
    <td align="right">Lorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt 
    ut labore et dolore magna aliqua.</td>
  </tr>
</table>
</body>
</html>
Table Element

The use of the align attribute in the <td> tag has also been deprecated. We can replace it with the text-align property using CSS, like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Example CSS text-align in table cells (left, center, right)</h3>
<table border="1" width="350">
  <tr>
    <td style="text-align:left">Lorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt 
    ut labore et dolore magna aliqua.</td>
  </tr>
  <tr>
    <td style="text-align:center">Lorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt 
    ut labore et dolore magna aliqua.</td>
  </tr>
  <tr>
    <td style="text-align:right">Lorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt 
    ut labore et dolore magna aliqua.</td>
  </tr>
</table>
</body>
</html>

Valign Attribute

If we set the height of the column with the height attribute, by default the web browser positions the text in the center of the table cell (vertically). To set this position, you can use the valign attribute. The value of this attribute is one of the values: baseline, middle, top, and bottom.

We can place the valign attribute on the <tr> tag to arrange all rows, or put it on the <td> tag to arrange each cell separately.

Following is an example of using the valign attribute:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Examples of valign attributes (top, middle, bottom, baseline)</h3>
<table border="1" >
  <tr height="100">
    <td>Row 1, Column 1</td>
    <td valign="top">Row 1, Column 2</td>
    <td valign="middle">Row 1, Column 3</td>
    <td valign="bottom">Row 1, Column 4</td>
    <td valign="baseline" >Row 1, Column 5</td>
  </tr>
  <tr height="50" valign="bottom">
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
    <td>Row 2, Column 4</td>
    <td>Row 2, Column 5</td>
  </tr>
</table>
</body>
</html>
Table Element

In HTML5, the valign attribute has been declared deprecated, and we should use CSS via the vertical-align property. Here is an example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Example of CSS vertical-align (top, middle, bottom, baseline)</h3>
<table border="1" >
  <tr style="height:100px">
    <td>Row 1, Column 1</td>
    <td style="vertical-align:top">Row 1, Column 2</td>
    <td style="vertical-align:middle">Row 1, Column 3</td>
    <td style="vertical-align:bottom">Row 1, Column 4</td>
    <td style="vertical-align:baseline" >Row 1, Column 5</td>
  </tr>
  <tr style="height:50px; vertical-align:bottom">
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
    <td>Row 2, Column 4</td>
    <td>Row 2, Column 5</td>
  </tr>
</table>
</body>
</html>

The baseline value will depend on the parent tag. Because here I don’t use parent tags for tables, the appearance is similar to the top value.

Rowspan and Colspan attributes

In displaying complex data, sometimes we need to combine several table cells into larger cells. For this purpose, HTML provides rowspan and colspan attributes. The rowspan attribute is used to combine table cells in row form, while the colspan attribute is used to form a longer column. These two attributes are placed in the <td> tag.

To make it easier to understand, we immediately enter with an example program code:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Examples of colspan and rowspan attributes</h3>
<table border="1">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td colspan="2" >Row 2, Column 2 & 3</td>
  </tr>
  <tr>
    <td rowspan="2"> Row 3 & 4, Column 1</td>
    <td> Row 3, Column 2</td>
    <td> Row 3, Column 3</td>
  </tr>
  <tr>
    <td> Row 4, Column 2</td>
    <td> Row 4, Column 3</td>
  </tr>
</table>
</body>
</html>
Table Element

On the 17th line I add the colspan = “2” attribute to the <td> tag. This attribute will make the <td> ‘enlarge’ tag and take place where it should require 2 table cells. If you want the <td> tag to occupy 3 cells, then just use the colspan = “3” attribute.

Inline 20 I create a table cell joining the rows below it with the rowspan = “2” attribute, just like the colspan attribute, we can change the value of this attribute if we need wider row space.

As another example, in the following code, I make a table that is commonly used in displaying data by combining several table cells in the first row. Here is an example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Examples of colspan and rowspan attributes</h3>
<table border="1">
  <tr>
    <td rowspan="2">No.</td>
    <td colspan="3" style="text-align:center">Column Title</td>
  </tr>
  <tr>
    <td>Sub Title 1</td><td>Sub Title 2</td><td>Sub Title 3</td>
  </tr>
  <tr>
    <td>1. </td><td>Data 1</td><td>Data 2</td><td>Data 3</td>
  </tr>
  <tr>
    <td>2. </td><td>Data 1</td><td>Data 2</td><td>Data 3</td>
  </tr>
</table>
</body>
</html>
Table Element

In the table above I put 3 columns together in the first row to become column headings, and put together the first and second rows for numbering. Table structure like this is commonly used in data presentation.

Th Element

Although we can create column headings using the <td> tag as in the previous example, HTML provides a special tag to create a column heading structure, i.e. the <th> tag (table header). This tag is used instead of the <td> tag in the first row of the table.

Following is an example of using the <th> tag:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Example of using th tag</h3>
<table border="1">
  <tr><th>Title 1</th><th>Title 2</th></tr>
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
</body>
</html>
Table Element

As you can see, by default the web browser will distinguish the appearance of the <th> tag, which makes the text bold and centered in the cell of the table (center).

All attributes (and also CSS styles) that apply to the <td> tag can also be placed in the <th> tag.

Caption Element

HTML provides a <caption> tag that can be added to the table structure to create table headings / captions. This tag is written after the opening <table> tag, but before the first <tr> tag.

Following is an example of using the <caption> tag:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Example of using caption tags</h3>
<table border="1">
<caption>Caption Table Here</caption>
  <tr><th>Title 1</th><th>Title 2</th></tr>
  <tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
  <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
</body>
</html>
Table Element

Although in the example above I made the <caption> tag in the table, but the web browser displays it above the table. If you want this title / description to be under the table, you can add the align attribute, like the following example:

<caption align = "bottom"> Caption Table Here </caption>

The align attribute can have values: top (default), bottom, right or left. But in HTML5 this attribute has been deprecated, so we can replace it with the CSS caption-side property, like the following example:

<caption style = "caption-side: bottom"> Caption Table Here </caption>

Colgroup and Col Element

If you notice, other than as a structure, the <tr> tag also functions as the ‘container’ of a line. If we want to change the background color for all table cells in the same row, we just need to place the CSS attribute / style in the <tr> tag. But not so for columns.

In the table structure, we have studied so far, there is no ‘container’ for the column. So, if you want to change the background color for a table column, you have to set it manually in each cell.

To overcome this, HTML provides the <colgroup> tag and the <col> tag. Both of these tags function as ‘hooks’ for the entire column. This tag is written before the first <tr> tag.

Following is an example of using the <colgroup> and <col> tags:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Examples of using colgroup tags and table col tags</h3>
<table border="1">
  <colgroup>
    <col>
    <col>
  </colgroup>
  <tr>
    <th>Title 1</th>
    <th>Title 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>
</body>
</html>
Table Element

As you can see, the <colgroup> tag and the <col> tag have no effect on the display.

Both of these tags only work if you use CSS attributes or styles.

For example, if I want to add different colors to each column, I just need to add the style attribute to the tag. Without using this tag, we are forced to set each tag for the corresponding column.

Following is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Examples of using colgroup tags and table col tags</h3>
<table border="1">
  <colgroup>
    <col style="background-color:#C9C9C9">
    <col style="background-color:#9AF998">
  </colgroup>
  <tr>
    <th>Title 1</th>
    <th>Title 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>
</body>
</html>
Table Element

Thead, Tbody and Tfoot Element

HTML still provides 3 more tags to create a complete table structure, namely the <thead>, <tbody>, and <tfoot> tags. These three tags are abbreviations of table head, table body, and table foot.

As the name implies, these tags are used to indicate which part serves as the title of the table (head), the contents of the table (body), and the closing table (foot). All three are only ‘dividers’ of the table structure and do not directly affect the appearance of tables.

Dividing a table like this is very useful if the data displayed is ‘complicated’, or needs a place as a CSS style location.

Following is an example of using <thead>, <tbody>, and <tfoot> tags:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Examples of using thead, tbody and tfoot tags</h3>
<table border="1">
  <thead>
    <tr>
      <th>No</th>
      <th>Participant's Name</th>
      <th>Address</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td></td>
      <td>Total</td>
      <td>---</td>
    <td>350</td>
    </tr>
  </tfoot>
  <tbody>
     <tr>
       <td>1.</td>
       <td>John Doe</td>
       <td>Jl. XYZ No.17</td>
  	   <td>50</td>
     </tr>	
     <tr>
       <td>2.</td>
       <td>Marry Jane</td>
       <td>Jl. ABC No.225</td>
  	   <td>300</td>
     </tr>
  </tbody>
</table>
</body>
</html>
Table Element

The <thead>, <tbody> and <tfoot> tags are placed as containers of the <tr> tag. If you notice, I placed the <tfoot> tag before the <tbody> tag, but the web browser displays it at the end of the table, this is indeed in accordance with the <tfoot> tag function to indicate the table’s final row.

From the resulting display, these three tags do not add any effect in the table. So, what is the function of table tags like this?

The development trend of HTML5 and various web technologies lately strongly recommend the use of semantic tags. We are encouraged to use tags that are ‘meaningful’. The <thead>, <tbody> and <tfoot> tags are part of this.

Although it has no impact on table views, ‘engines’ such as search engines and future web browsers can use these tags to display data better. Because it doesn’t hurt we use this tag structure in creating tables.

If you use CSS, the <thead>, <tbody> and <tfoot> tags can function as a CSS selector location, for example, to change the style only for the last row of the table, or only for the table body.

Filling Table Cells

In the examples in this chapter, I only use simple text as a table cell filler, but we can insert almost all other HTML tags into this table cell, including links, images, and even other tables. Here is an example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<h3>Example contents of table cells with various HTML tags</h3>
<table border=1>
  <tr>
    <th>No.</th>
     <th>Site Address</th>
     <th>Remarks</th>
     <th>Screen Shoot</th>
  </tr>
  <tr>
    <td>1</td>
    <td><a href="https://laikie.site/">laikie.site</a></td>
    <td><p> Educational <em>site </em>programming <b>for beginners</b></p></td>
    <td><img src="Bundaran_HI.jpg" width="100"></td>
  </tr>
  <tr>
    <td>2</td>
    <td><a href="www.google.com">www.google.com</a></td>
    <td><p>Search Engine Site <del>No.2</del> No.1 in the world</p></td>
    <td><img src="Bus_TransJakarta.jpg" width="100"></td>
  </tr>
</table>
</body>
</html>
Table Element

As you can see, in the table above I use various tags that we have learned such as links, text formats, and images in table cells.

Creating Layouts Using Tables

If you already understand CSS or have studied the current web creation standards, the above title will be very much avoided. And I also advise you not to use tables to create layouts. Layout (page views) should use CSS with the help of <div> tags or new HTML5 tags (we will learn later).

However, I would like to show you how tables were used in the past to create page layouts. This was common in the 2000s where CSS was still underdeveloped. Even I still remember when I first used Macromedia Dreamweaver 8 around 2006 (before it was acquired by Adobe). At that time this application will also generate web page layouts using tables.

Here is an example of how to ‘create’ with tables to make page layouts as simple as:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
</head>
<body>
<table border=1>
  <tr height=150 bgcolor=#E5E5E5>
    <td colspan=3 valign=bottom align=left>
    <table border=1 width=400 bgcolor=white>
      <h1>Laikie</h1><p>Programming Website for Beginners</p>
      <tr>
        <td>Home</td><td>Blog</td>
        <td>Tutorial</td><td>Contact Us</td>
      </tr>
    </table>
    </td>
  </tr>
  <tr height=400>
    <td width=200 bgcolor=#F2F2F2 valign=top>
    <table border=1 width=200 bgcolor=white>
      <tr><td>Article Title 1</td></tr>
      <tr><td>Article Title 2</td></tr>
      <tr><td>Article Title 3</td></tr>
      <tr><td>Article Title 4</td></tr>
    </table>
    </td>
      <td width=700 valign=top><p>Lorem ipsum dolor sit amet, 
      consectetur adipiscing elit. Pellentesque nisi justo, 
      aliquam at finibus sit amet, efficitur quis ipsum. 
      Proin ut pharetra felis. Aenean convallis mattis metus, 
      ut sagittis felis fringilla vitae.</p></td>
    <td width=300 bgcolor=#F2F2F2></td>
  </tr>
  <tr height=30>
    <td colspan=3>© <i>Copyright Laikie 2019</i></td>
  </tr>
</table>
</body>
</html>
Table Element

As you can see, to get the results above, I used various attributes to produce table views and use tables in the table. This structure makes it difficult to identify HTML code. The large number of table tags needed also makes writing code inefficient.

If you haven’t learned CSS, the layout above can be used to create a simple website. But if you ‘seriously’ want to learn web programming, I highly recommend spending time and energy learning CSS. With CSS, the layout obtained will be much better and easier to manage.

Closing: Table Element

In this chapter, we have studied various tags and attributes used to create tables. In closing I will exemplify creating a table structure with HTML, and change its appearance using CSS:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Tables</title>
  <style>
    table  {
      border-collapse:collapse;
      border-spacing:0;     
      border:1px black solid;
      width:40%;
    }
    th, td {
      padding:10px 20px;
      border:1px black solid;}
    th{
      background-color: #87F97B;
    }
    tr:nth-child(even) {
      background-color: #EDEDED; 
    }
    tr:nth-child(odd) {
      background-color: #FFF; 
    }
  </style>
</head>
<h3>HTML table</h3>
<table>
<caption>Participant Deposit Table</caption>
  <thead>
    <tr>
      <th>No</th>
       <th>Participant's Name</th>
       <th>Address</th>
       <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="3">Total</td>
    <td>2905</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>1.</td>
      <td>John Doe1</td>
      <td>Jl. ABC No.17</td>
    <td>50</td>
    </tr>
    <tr>
      <td>2.</td>
      <td>John Doe2</td>
      <td>Jl. DEF No.225</td>
    <td>300</td>
    </tr>
    <tr>
      <td>3.</td>
      <td>John Doe3</td>
      <td>Jl. UVW No.32</td>
    <td>1.000</td>
    </tr>
    </tr>
    <tr>
      <td>4.</td>
      <td>John Doe4</td>
      <td>Jl. XYZ No.111</td>
    <td>1.555</td>
    </tr>
  </tbody>
</table>
</body>
</html>
Table Element

Apart from the CSS code that I use, the table structure above uses most of the tags we have learned.

The table is one important structure for the presentation of data. If you are dealing with databases, what we learn in this chapter is very useful for presenting database results in HTML form.

In the next chapter, we will discuss one of the most important features in a website: Form. The form discussion will be divided into 2 chapters: Form Element, and HTML5 Element Form.

HTML Tutorial List

  1. Learn HTML For Beginner (Part 1 : Introduction HTML)
  2. Learn HTML For Beginner (Part 2 : Basic Structure of HTML)
  3. Learn HTML For Beginner (Part 3 : Head Element)
  4. Learn HTML For Beginner (Part 4 : Text Formatting Element)
  5. Learn HTML For Beginner (Part 5 : List Element)
  6. Learn HTML For Beginner (Part 6 : Image Related Element)
  7. Learn HTML For Beginner (Part 7 : Audio dan Video Element)
  8. Learn HTML For Beginner (Part 8 : Table Element)
  9. Learn HTML For Beginner (Part 9 : Form Element
  10. Learn HTML For Beginner (Part 10 : HTML5 Form Element)
  11. Learn HTML For Beginner (Part 11 : Embed, Object dan Iframe Element)
  12. Learn HTML For Beginner (Part 12 : HTML5 Canvas Element)
  13. Learn HTML For Beginner (Part 13 : Scalable Vector Graphics (SVG))
  14. Learn HTML For Beginner (Part 14 : HTML5 Semantic Tag (Layout))

What do you think?

Comments

Leave a Reply

One Ping

  1. Pingback:

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

0

Comments

0 comments

Learn HTML For Beginner (Part 7: Audio and Video Elements)

Learn HTML For Beginner (Part 9: Form Element)