HTML5 and CSS3 Fundamentals – Tables

Introduction to HTML Tables

In this class, we will learn how to create tables. But before we begin creating tables, why are tables important in your web page? Good question?

Well, tables used to be and are still very important components of any web development process. Way back in time before the arrival of CSS, tables were used to structure page layouts. Tables were actually the de-facto standards for definition of HTML page layouts.

Of course that has changed—because of CSS. But there remains one fundamental aspect about tables that we can’t just wish away: how to present tabular information. As a matter of fact, there is no other way you can avoid tables if you’d like to present your information in tabular format apart from using tables.

For instance, if you are a web hosting company data readable, and you’re interested in presenting your users with various application’s pricing pages so that users can compare them, there is no way you’ll avoid using tables. This is because tables will help you to present information that’s easily scan-able and comparable.

So, now that you understand the importance of tables, let’s get to the basics of creating HTML tables

How to Define HTML Tables

An HTML table is basically a collection of rows and columns. The intersection between the rows and columns is called a cell. What can be inserted into a cell is data which can range from images, text, links or even other tables.

We use the <TABLE> tag to define an HTML table.

We use the <TR> tag to define the table rows within a given table.

We use the <TD> tag to define the data that’s inserted in the cells.

Have a look at the following HTML code:


<TABLE>

<TR>

<TD>John</TD>

<TD>Janet</TD>

<TD>50</TD>

</TR>

<TR>

<TD>Samson</TD>

<TD>Jackson</TD>

<TD>31</TD>

</TR>

</TABLE>

The above HTML code produces table with 2 rows and 3 columns. Note that the table produced by the above code lacks the borders, title and other important information that tables should have.

Other attributes of the <TABLE> in include the following:

  • Sortable. It defines whether a given table can be sorted or not. This attribute is supported in HTML 5.
  • Align. It defines the alignment of a table. However, this attribute is not supported in HTML5.
  • Bgcolor. It defines the background color of a table. It is not supported in HTML5.
  • Border. It defines the borders of a table. It is not supported in HTML5.
  • Cell padding. It’s measured in pixels and indicates the space that exists between the cell wall in a table and the cell content. It is not supported in HTML5.
  • Cell spacing. It’s the spacing between the cells in a table. It is not supported in HTML5.
  • Width. It defines the width of a table. It is not supported in HTML5.
  • Caption. It defines the title of the table.

There are sometimes when you’d like to specify the number of rows or columns that a particular cell should span. In such a case, you’ll have to use the <TD> tag attributes such as:

  • Colspan. The Colspan attribute specifies the number of columns that a given column should extend.
  • Rowspan. It defines the number of rows that a given row should extend.

The HTML code below shows how the two attributes of the <TD> can be used:


<TABLE>

<TR>

<TH>PETER</TH>

<TH>KEN</TH>

</TR>

<TR>

<TD>MAY</TD>

<TD>$450</TD>

</TR>

<TR>

<TD>JUNE</TD>

<TD>$500</TD>

</TR>

<TR>

<TD COLSPAN="2">$950</TD>

</TR>

</TABLE>

Well, there you have it. Keep practicing. You’re on your way to becoming a professional web developer! In our next class, we’ll learn how to use CSS with tables.

GET YOUR FREE PYTHON EBOOK!

(Visited 37 times, 1 visits today)

Comments