Tables are commonly used in HTML to organize and display data. Their uses are wide-ranging, and they help to make it easier to pass information to a webpage’s users.
In today’s tutorial, we will cover the basics of tables in HTML, include how to use required tags and CSS styles in your tables.
This guide at a glance:
This is the perfect place to start your journey as a front-end developer. With no prior knowledge needed, you will learn how to build beautiful, functional websites.
A table is a structured set of data arranged in rows and columns. Tables are widely used for data presentation and data analysis, and they are used frequently in books, scientific journals, and websites.
HTML, which stands for HyperText Markup Language, is a markup language used to instruct web browsers how they should display web pages. The latest iteration of HTML (HTML5) comes with robust support for displaying data using complex or simple tables.
When we define a table element, we use the following tags:
Firstname Lastname Age Mark Ruffallo 54 Reese Witherspoon 48
There are many other HTML elements that can be used to customize the appearance and structure of tables. These include , , , which we will discuss later.
It is important to note that tables should be functional. That means, the data or information displayed in your table should be easy to read and understand. If you do not have an idea how your table should be formatted, you can make a sketch on paper. This will help you to visualize and organize the table before you write code.
Most tables need some sort of text that describes the purpose of the table. We can use the element to solve this problem. It is optional. But since it displays the caption (or title) of the table, it helps with ease of use and accessibility.
Neonates Immunization Table Name Sex Weight(kg) Immunization Doses The element is an optional element that defines a set of rows summarizing the columns of the table layout. It usually comes after the tag.
Mean Weight (kg) 2.9 Learn HTML without scrubbing through videos or documentation. Educative’s text-based learning paths are easy to skim and feature live coding environments, making learning quick and efficient.
Jerry Holmes M 5 0 3.5
This behavior was deprecated in HTML5 in favor of the CSS border property. With this change, one can now add borders across the table or to individual elements. If you don’t want your cells to have separate borders, you should set the border-collapse property to collapse. Otherwise adjacent cells would have distinct borders.
table < border-collapse: collapse; >td, th
In the next section I would show you how to create tables with a complex layout, where table cells can span multiple rows or a number of columns.
In the table we are building, notice that the “Mean Weight” cell spans more than one cell, and the “Immunization Doses” seems like a “Super Heading” with subheadings (taken and left).
This behavior is made possible with the colspan and rowspan attributes. Both attributes accept a number value, which is the number of rows or columns you want spanned.
Name Sex Immunization Doses Weight(kg) Taken Left The rowspan attribute enables the contents of a table cell span multiple rows. In the code sample above, we’ve made the "Name" , "Sex" , and "Weight" heading cells span two rows.
The colspan makes a single table cell span the width of more than one column or data cells. Using the colspan attribute, we make the “Immunization Doses” heading span two columns (and a single row). Then, by adding the subheadings to the next row, they are automatically added under “Immunization Doses”.
Some table styling attributes are no longer supported in HTML5; corresponding CSS properties have replaced them. Some of these attributes include:
Cellspacing and cellpadding can be achieved using border-spacing and padding respectively. border-spacing does not have any effect if border-collapse is set to collapse.
The color and other attributes of text within cells can be modified by specifying the value of a relevant attribute, such as color, font-size, and font-family, using an appropriate selector.