What is a table?
In today’s tutorial, our discussion will center on working with HTML table. HTML form element was covered in our previous tutorial.
In computer terminology, a table is an object used to summarize a large amount of data in rows and columns. It is, therefore, an easy and straightforward object to use when comparing different items. Someone can easily understand data summarized in a table for purposes of analysis and inference. Tables create a portable data structure for ease of storage and retrieval. This is why databases store data in tabular form; also, data is stored and displayed in spreadsheets in tabular form. Tables also
When working with HTML table, we can use tables to display and compare data; we can also use tables to create web layouts. We shall discuss the latter in our CSS course. In this module, we will learn how to create an HTML table for the purpose of displaying and comparing items.
Let us begin our discussion on creating tables in HTML with a typical example as illustrated below.
Table Example: Typical Cost of Hosting a Website
| Smartweb | Hub8.ng | Qservers | Domainking |
Shared Hosting | 350 | 250 | 350 | 300 |
WordPress | 3000 | 490 |
| 533 |
VPS Hosting | 15000 | 827 | 27500 |
|
The Table Element <table>
The HTML5 table element is used to define information presented in a table in an HTML document. As the form element, this element is used to create the table object container but does not display anything in the browser.
Hence, to represent information in a table, other elements relating to tabulation are included. These elements shall be discussed here. Meanwhile, how do we display the above table in a web browser?
To display the above table, we shall enter the following codes in our text editor:
See the Pen Main Table Example by KmacIMS (@kmacims) on CodePen.
Looking at the above code, you will observe that we used different elements and attributes. however, the attributes used above are obsolete in HTML5, though some browsers still support them. To style your HTML table, I will advise you to use CSS properties.
Let us take a look at some of the obsolete attributes you may work with in HTML table before discussing other HTML5 table elements. Remember that these attributes are not supported in HTML5.
Obsolete attributes of the table element
Use the global attributes, and the following:
- align: This attribute is used to indicate where the table will be positioned in the HTML document. The possible values are right, left and center. Instead of using this attribute, use the margin property in CSS.
- bgcolor: Use this attribute to specify the background color of a table in the HTML document. Possible values can be string or Hex code such as:
- white = #ffffff
- blue = #0000ff
- red = #ff0000
- green = #008000
- gray = #808080
- lime = #00ff00
- yellow = #ffff00
- silver = #c0c0c0
Instead of using bgcolor, use the CSS background-color property.
- border: Use this attribute to add a border to your HTML table. The value is in pixels and specifies the size of the surrounding frame of a table. Instead, use the CSS border
- cellpadding: Use this attribute to specify the space between the content of a cell and the surrounding border. The value is specified in pixel or percentage. You can use the border-collapse property of CSS with the values collapse, separate, and
- frame: Use the frame attribute to add border frame to the table. This attribute will enable you to decide which sides of the table you want to add frames. It has 9 different values as follow:
- void: this is the default and shows no frame
- above: shows frame on the top side of the table only
- below: shows frame on the bottom side of the table only
- hsides: shows frame on the top and bottom sides of the table only
- vsides: shows frame on the right and left sides of the table only
- lhs: shows frame on the left-hand side of the table only
- rhs: shows frame on the right-hand side of the table only
- box: shows frame on all four sides of the table
- border: shows frame on all four sides of the table
- rules: Use this attribute to add lines to your table. In CSS, apply the border property to the appropriate elements. It has the following values:
- none: this is the default where there are no lines
- groups: applies line or rules to rows and column groups such as <thead> <tbody> <tfoot> and <colgroup>.
- rows: this will apply lines or rules to rows in a table only
- cols: this will apply lines to columns in a table
- all: this will apply lines or rules to both columns and rows in a table.
- width: Use this attribute to define the width of the table in a viewport. The value can be specified in pixel or percentage. In CSS, use the width
The code example above has most of these attributes, you can alternate the values and see how they appear on the table. You can as well delete any of the values to see its effect on the table. However, remember that when working with HTML tables, you will not need these attributes for future browser support.
Working with HTML Table
Creating a Table in HTML
Creating a table in HTML, such as the one shown above, is simple if you understand the process. You will have to follow the following steps:
- Create the table container using the table element
<table> … </table>
- Use the table row element to create each row, by declaring <tr> for each row:
<table>
<tr> … </tr>
</table>
- For the first row which is a heading row, use the <th> element to specify the column headings with a col scope attribute:
<table>
<tr>
<th></th> <!—This column is empty –>
<th scope=”col”>Smartweb</th>
<th scope=”col”>Hub8.ng</th>
<th scope=”col”>QServers</th>
<th scope=”col”>DomainKing</th>
</tr>
</table>
- For the second row which has a row header and four column data, use the <th> with a row scope attribute for the first column, and table data element <td> for the remaining four columns:
<table>
<tr><!—This is first row – heading row–>
<th></th> <!—This column is empty –>
<th scope=”col”>Smartweb</th>
<th scope=”col”>Hub8.ng</th>
<th scope=”col”>QServers</th>
<th scope=”col”>DomainKing</th>
</tr>
<tr>
<th scope=”row”>Shared Hosting</th>
<td>350</td>
<td>250</td>
<td>350</td>
<td>300</td>
</tr>
</table>
- Continue as in 4 above until all the rows are captured.
HTML5 Table Elements
The Table Caption Element <caption>
This element is used in a table object to create a title for the table. The title can be at the top of the table or below the table, but it should be the first child of the table before the rows and column data are entered. To position the caption on top or bottom of the table, we use the CSS property: caption-side (with top or bottom value).
Attributes
It takes on global attributes. It also has the align attribute, but it is deprecated. This attribute has the values of top, bottom, left or right.
See the Pen Table caption example by KmacIMS (@kmacims) on CodePen.
The Table Column Element <col>
The <col> element is usually used when the <colgroup> element is used in a table. It is used to define column properties within the <colgroup> for the purpose of applying styles and customizations. It actually helps us to avoid style repetition.
Attributes
In addition to global attributes, it takes on the following attributes:
- Span: This attribute is used to specify the no of columns within the group.
Example
See the example below.
The Table Column Group Element <colgroup>
This element is used to define a group of columns with the same features in a table. It is used alongside the <col> element in a table definition for the purpose of styling the table columns. When used in a table, it must come after the <caption> element.
Attributes
It takes on global attributes.
Example
See the Pen Col and Colgroup Ex. by KmacIMS (@kmacims) on CodePen.
The Table Header Element <th>
This element is used to define a header cell in an HTML table. When used in a cell, it renders texts in that cell with a bold-face. The <th> element can be used to create header cells in the row or column of a table, but this scope is defined by the scope attribute.
Attributes
This element has the global attributes and the following:
- abbr: Used to create an abbreviated version of the content of the header cell.
- colspan: This attribute is used to specify the number of columns the header will extend to. Its value is a positive integer with a default value of 1. If colspan is 2, then, the header will extend to two columns. See example.
- headers: Used to specify a list of header cells that related to a cell.
- rowspan: This attribute is used to specify the number of rows the header will extend to. Its value is a positive integer with a default value of 1. If rowspan is 2, then, the header will extend to two rows. If the value is 0, then it will extend to the end of the table.
- scope: Is used to specify where the header cell belongs. A value of row implies that header cell belongs to the row while a value of col implies header cell is for a column. Values are:
- row: header cell belongs to the row
- col: header cell belongs to column
- rowgroup: header cell belongs to a group of rows
- colgroup: header cell belongs to a group of columns
- auto: the default value when not specified.
Example
See the Pen colspan and rowspan Ex. by KmacIMS (@kmacims) on CodePen.
The Table Row Element <tr>
The <tr> element is used to define a row of cells in an HTML table. When defining a row of cells in a table, the <th> and <td> elements are used within the <tr> element as has been illustrated in all our examples so far.
Attributes
Use global attributes.
The Table Data Element <td>
When you start working with HTML table you will need to specify individual data components of the table. The table data cell <td> element is used for this purpose. It defines a cell in an HTML table. This element is used within the <tr> element.
Attributes
The <td> element has the global attributes and the following:
- colspan
- rowspan
- headers
The Table Head Element <thead>
The <thead> element is used to group table header contents together in HTML. We use them together with the <tbody> and <tfoot> elements.
Attributes
Use global attributes.
The Table Body Element <tbody>
The <tbody> element is used to group the body content of a table together in HTML. We use this element together with the <thead> and <tfoot> elements.
Attributes
Use global attributes.
The Table Foot Element <tfoot>
The <tfoot> element is used to group footer contents of a table together in HTML. When you work with HTML table, use <tfoot> to create the summary of the table content. We use this element together with the <thead> and <tbody> elements together.
Attributes
Use global attributes.
Example
See the Pen thead, tbody, tfoot Ex by KmacIMS (@kmacims) on CodePen.
We have been using the deprecated attributes to style our tables till now. In the example below, I will use CSS to style our sample table.
See the Pen Table with CSS styling by KmacIMS (@kmacims) on CodePen.
Conclusion
We have come to the end of our tutorial on working with HTML table. By this also, we have come to the end of our HTML tutorials for beginners. We have thus far covered most of the HTML elements you will need as you start your journey in web designing. In our next tutorial, we shall start discussions on how to style your webpages. I hope to see you there.
