Before the CSS standard was applied to all web browsers in the 2000s, most web developers used tables to arrange the layout of a web page. However, now that CSS is available, using HTML tables for the layout of web page views is no longer recommended. When customizing the appearance of web pages, we are strongly advised to use CSS.
When we display structured data from a database, we usually do so in table form, right? HTML, as a markup language, has a table element that can be used to create a table. We don’t need to be concerned because setting a table is so simple that it can be done in under 15 minutes.
Understanding HTML Elements in Creating Tables
Let’s start with defining what a table is. Tables are used to group data in a structured way using rows, columns, and cells. A table’s rows, columns, and cells are extremely useful for viewing the information contained within it.
When we create a table with HTML, we must be aware of several tags or HTML elements. However, we can create a table using only the three HTML elements listed below:
- The
<table>element is used to define table creation. - The
<tr>element is used to define table rows. - The
<td>element is used to create a column or cell for each row in a table.
Along with the development and requirement for tables, HTML also provides the following optional elements in the creation of tables:
- The
<th>element is used to define headers in tables. - The
<thead>element is used to wrap the contents of the title section or table head. - The
<tbody>element is used to wrap the contents of the body of the table. - The
<tfoot>element is used to wrap the contents of the footer or bottom of the table.
Instead of getting confused by these elements, let’s just practice using the three most commonly used in table creation.
Please begin by creating a new html file. We can name the html file index.html or whatever we want. Please review the following code sample and paste it into the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create Tables in HTML</title>
</head>
<body>
<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>Row 2 - Column 2</td>
<td>Row 2 - Column 3</td>
</tr>
</table>
</body>
</html>
The table tag in the preceding code contains a border attribute, which functions to add a line to the table. While the value 1 in the border attribute represents the line thickness to be displayed, the higher the value, the thicker the displayed line.
The following is the output of the above program code:
Merge Cells in HTML Table
When creating a table, we occasionally need to combine several cells into one. HTML provides several attributes that we can use to combine several cells in a table into one:
- The rowspan attribute is used to combine rows in a table.
- The colspan attribute is used to combine columns in a table.
This attribute is applicable to the td and th tags. Consider the following program code as an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create Tables in HTML</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="3">Grade</th>
</tr>
<tr>
<th>Mathematics</th>
<th>Business</th>
<th>Biology</th>
</tr>
<tr>
<td>Robert</td>
<td>A</td>
<td>B</td>
<td>A</td>
</tr>
<tr>
<td>Leo</td>
<td>C</td>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>Thomas</td>
<td>A</td>
<td>A</td>
<td>C</td>
</tr>
</table>
</body>
</html>
The rowspan attribute in the code above has a value of 2, indicating that the rows to be combined are two rows. While the colspan attribute has a value of 3, this indicates that the columns to be combined are three. The code above also includes a th tag, which serves as the table’s head. When displayed, the data in the th tag will be bolder than the data in the td tag.
The output of the above program code is as follows:
Provides Color and Spacing Between Cells in HTML
The resulting table in the previous program code example appears to be close to each other from one cell to the next. To address this, HTML includes a cellpadding attribute that we can use to specify the spacing between cells. This cellpadding attribute can be directly applied to the table tag as follows:
<table border="1" cellpadding="10">
...
</table>
The greater the cellpadding attribute value, the greater the distance between cells, and vice versa. We can also use the bgcolor attribute to give cells or tables a background color, which we can then fill with color. For example, we will give the Grade a green background color and the Name a orange background color. So we simply add the bgcolor attribute to the th tag as follows:
<th bgcolor="orange" rowspan="2">Name</th> <th bgcolor="green" colspan="3">Grade</th>
The table will look like this after you add the cellpadding attribute to the table tag and the bgcolor attribute to the th tag:
Apply CSS Code for Table Design
We previously discussed how to use HTML attributes to create lines and provide color and spacing to tables. For the time being, after the introduction of CSS, the use of these attributes in table design is no longer recommended. It is suggested that we use CSS code to create lines and add color and spacing to the table.
CSS code can be added to a web page by creating a separate CSS file or by storing it in the HTML head element. Avoid saving it on other HTML elements because it can make the program code look messy. Aside from that, saving the CSS code in a separate file or in the head element will allow you to reuse it.
CSS code is written by first defining which HTML tags will be changed or given CSS effects. Please see the sample program code below for more information:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create Tables in HTML</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
th {
background-color: #089108;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">Name</th>
<th colspan="3">Grade</th>
</tr>
<tr>
<th>Mathematics</th>
<th>Business</th>
<th>Biology</th>
</tr>
<tr>
<td>Robert</td>
<td>A</td>
<td>B</td>
<td>A</td>
</tr>
<tr>
<td>Leo</td>
<td>C</td>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>Thomas</td>
<td>A</td>
<td>A</td>
<td>C</td>
</tr>
</table>
</body>
</html>
CSS code is already present in the program code example above. The CSS code is contained within the style element, which is contained within the head element. This style element indicates that the code contained within it is CSS code that is used to design web pages.
So, what purpose do the CSS properties in the program code above serve? Let’s take a quick look at the CSS properties used in the program code above.
- The
border-collapse: collapse;property is used to shrink table lines into one line. - The
border: 1px solid black;property is used to provide a line along with the line thickness and color of the line. - The
padding: 10px;property is used to control content spacing in a table. - The
background-color: #089108;property is used to provide a green background color. - The
color: white;property is used to whiten the text.
The output of the program’s code will be as follows:
To make it more interesting, we can add a CSS width property that allows the table to adapt to the size of the screen. The hover property is used to give the table row a color effect when the cursor hovers over it. As a result, the existing CSS code will look like this:
<style>
table {
border-collapse: collapse;
width: 100%;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
th {
background-color: #089108;
color: white;
}
tr:hover {
background-color: #f2f2f2;
}
</style>
The table’s output will look like the image below:
Conclusion
Isn’t it simple to create tables in HTML? When creating a table, we must pay close attention to the rowspan and colspan attributes. Because we must exercise caution when determining which cell size will be applied to rowspan and colspan.
Check out other articles that can help us expand our knowledge of web programming:
- Learn CSS For Beginner Web Design
- 7 Steps to Become a UI UX Designer
- What Is a Full Stack Developer? Skills to Be Mastered
I hope you found this article useful, and I hope to see you again in the next article. Thank you very much.
