Tables in HTML 5
If you are looking for an easy way to lay text, data, content, and images in a grid, try creating a table. Tables are perfect for displaying numerical data, but they can also help you present any information that naturally falls into columns and rows in a manner that’s easy to understand.
They can also help you save a lot of precious white space which would otherwise have been occupied by terms, definitions, and similar data which covers a lot of space when presented in paragraphs or other elements.
Markup is an HTML 5 Table
Compared to lists, tables in HTML 5 contain a lot of markups. However, the table element is the primary markup container for creating tables. You use an opening table tag <table> and a closing table tag </table> to denote the opening and closing of a table in HTML 5. The table row <tr> and table data <td> are other primary elements used in tables in HTML5.
You can use these three elements to create a basic table. However, if you are looking to create a rather complex table in HTML 5, you can use other elements, such as <caption> or <colgroup> within these three primary elements. Moreover, there are <thead> and <tbody> elements that define the heading and actual content of the table, respectively.
The basic markup for a simple table in HTML 5 is as follows.
HTML 5 Table Tag Example
<!DOCTYPE HTML> <html> <head> <meta charset= "utf-8"> <title>Creating Tables</title> </head> <body> <h1>How to Create Tables in HTML 5</h1> <table> <tr><th>Name</th><th>Age</th><th>Gender</th></tr> <tr><td>David</td><td>25</td><td>Male</td></tr> <tr><td>William</td><td>30</td><td>Male</td></tr> <tr><td>Elizabeth</td><td>22</td><td>Female</td></tr> </table> </body> </html>
Remember that you will have to use <tr> inside all other table containers.
You can add a border and a caption to the same table by inserting a caption <caption> element and a border entry, as shown in the following figure.
Table Tag Example with Border
<!DOCTYPE HTML> <html><head> <meta charset="utf-8"> <title>Creating Tables</title> </head> <body> <h1>How to Create Tables in HTML 5</h1> <table border="1"> <caption>Markup for HTML 5 Table</caption> <tr><th>Name</th><th>Age</th><th>Gender</th></tr> <tr><td>David</td><td>25</td><td>Male</td></tr> <tr><td> William</td><td> 30</td><td>Male</td></tr> <tr><td>Elizabeth</td><td>22</td><td>Female</td></tr> </table> </body> </html>
Our table will look like this in the browser:
The Table Border with Cell Spanning
Every table you create must have a border; you can apply one by using the “border” entry which we have used in the previous example. It is important for you to define the value of the table as “1” for the browser to validate it properly. However, browsers will display the border regardless of the value you use.
Earlier versions of HTML use the table=”n” entry to determine the width of the table. HTML 5 only uses the entry to display or not display the table if you remove it from your code. It has nothing to do with the width of the table in HTML 5.
Managing Table Layouts
You can make your tables complex, and you can also do a lot of interesting things with them. HTML 5 gives you a lot of power in this regard. However, for the sake of this book, it is recommended that you stick to the basics to better understand how HTML 5 works as far as tables are concerned. When it comes to the layout of the table, there are only three main elements in HTML 5 which enable you to design a layout of your choice.
These elements are as follows:
- Cells are the basic building blocks of tables and contain everything including data, text, images, and whatever else is within the borders of the table.
- Borders are actually four lines on all four sides of the table that form a rectangle or square.
- Cell Spans help you add or delete cell walls within the borders of the table. Cell spans enable you to accommodate different cell layout, making the table much more flexible. Cell spans actually combine or merge cells, or remove walls between them to change the cell space.
You can make your table much more attractive by spanning different rows, cells, and columns. In the following example, we will try to span cells and rows in the table and see what happens.
Cell Spanning Example
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Creating Tables</title> </head> <body> <html>Table Layouts</h1> <table> <tr><th>Name</th><th colspan="2">Telephone</th></tr> <tr><td>ABC</td><td> 12345678 </td><td>123 45 679</td></tr> <tr><td rowspan="2" colspan="2">Cars No.</td><td>lXJ 1</td></tr> <tr><td colspan="2">LXJ2</td></tr> <tr><td colspan="3">Ho No.X, California USA</td></tr> </table> </body> </html>
Cell Spanning Example Output
With this example, we conclude this chapter. Try to follow the instructions in this book to master HTML 5 basics before moving on to more complex table layouts and design.
Exercise
Task:
Create a 3 column table with the first heading of Car, second heading of Manufacturer, and third heading of Price. Put the names of your three favorite cars, their manufacturers, and their prices under each heading by creating three rows. Also, add a border to the table and give it a value of 1.
Solution:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Exercise</title> </head> <body> <h1> Exercise 4</h1> <table border="1"> <tr><th>Car</th><th>Company</th><th> Price</th></tr> <tr><td>i8</td><td>BMW</td><td>$13,6650</td></tr> <tr><td>Fiesta</td><td> Ford</td><td>$13,965</td></tr> <tr><td> XF</td><td> Jaguar</td><td>$94,975</td></tr> </table> </body> </html>