Introduction
HTML tables are used to show tabular data on a web page. They are best used for displaying a single column of data which is going to be sorted by the table headers.
There are no strict rules on how many rows or columns a table should have, but keeping them as simple as possible is a good idea. In the article, we will explain how to use Html table examples.
HTML tables allow arranging data
The HTML table is a container for rows and columns of data. The table contains one or more rows, each with one or more cells.
A cell can be thought of as a box that can contain text, images, other HTML tags, etc. Cells are arranged horizontally (left-to-right) within a row and vertically (top-to-bottom) within a column.
Make HTML Table
The syntax for the HTML table is a bit different from that of other HTML tags. The table starts with the “table” tag, followed by the “tr” tag for every row, and ends with the “td” tag for every cell.
Take note!
Put your code inside the body tag of the following HTML silhouettes!
< Table> tag to create an HTML table
The external silhouette of the html table.
<tr> element adds rows to a table.
After adding the table tag, we should enter the row tag with the following syntax.In the example, we added three rows.
<td> element adds data to the row’s table
A table is a visual way of presenting data in rows and columns. You can use tables to show how different categories or pieces of related information.There are three types of tables:
- An “HTML table” is a table you create with HTML code on a web page.
- A “spreadsheet” application allows you to create, edit, and view tables on your computer.
- A “graphic” is an image file (usually in JPEG or GIF format) that contains a table.
The code of the HTML table
The output of the HTML code
html table examples
Meaningful data with headings <th> element
Headings are essential in HTML because they provide an outline for the content that follows. They also make it easier to skim through a document and find the information that is relevant to you.
The code of the program
The output of the HTML code
HTML Table Borders
Table Borders are a way to make tables more visually appealing. They can show the table’s structure or highlight essential data.
The code of the program
The output of the HTML code
Spanning Columns with colspan attribute
The cod of the program
Spanning rows with rowspan attribute
The rowspan attribute determines the number of rows a single cell spans in a table. This attribute can be applied to any table cell but must be placed inside the opening and closing tags.
The code of the program
The output of the HTML code
The three Tables’ sections
A table has three main sections: a head, a body, and a footer. The head is the title of the table, which can be anything from “Table 1” to “Monthly Expenses.”
The body consists of all the rows and cells that make up your table; it’s where you list your data or other information about your topic.
Lastly, there’s usually some footer at the bottom that contains things like sources for your data or any additional essential notes about what you’re presenting.
tbody section
A tbody is a table body. It is the portion of the table that contains all the data.Knowing how to use a tbody when using tables is essential to make your data more understandable and easy to read.
The code of the program
The output of the HTML code
thead section
A table header is a short phrase that summarizes the purpose of the table. It can also be a title or caption for the table.
Table headers are often used in spreadsheets to summarize data and provide context for each column and row. They are also used in HTML tables to provide context for each row of data.
The code of the program
The output of the HTML code
tfoot section
This is the last part of the table. The tfoot element defines a footer for a table and typically contains information about data provenance, links to related tables, etc.
The code of the program
The output of the HTML code
Styling table with CSS
Styling with CSS is a technique that allows you to separate the styling and content of your website. This is done by using a CSS style sheet, which is then applied to the HTML document.This technique has many advantages.
It helps keep the content and styles separate, making editing easier without accidentally changing the other. It also helps reduce clutter in your HTML document, as you can have multiple style sheets for different site sections.
By default, the table is bland, with no border, and the font color is black.To style your Table with CSS, you first need to identify the HTML elements that make up the table.
Learn more about tables
HTML table border input
HTML table border output
