HTML tables are sets of data presented in rows and columns. To create an HTML table use the
element. You can use
to create lines,
to create columns and
to create table headers.
Tables are used to present data in an easy to understand manner using rows and columns. We meet tables every day, from the bus schedule that tells passengers when a bus is coming, to the ingredients table in the food we eat.
In HTML, tables are used as a method of presenting data. This tutorial will discuss, with examples, the basics of HTML tables, cells that span multiple columns and rows, and how to model a table. By the end of this tutorial, you will be an expert in creating and using tables in HTML.
Creating an HTML table
Tables are sets of data presented in rows and columns. Using a table makes it easy to see the connections between a set of values ‚Äã‚Äãin a data set.
In HTML, tables are defined using the
. In
tag, you can use:
to create rows
to create columns < / li>
to create table headers.
Suppose you want to create a table that lists the sold coffee in a coffee shop and their prices, as we have done it - it. This table should have two columns, coffee and price, and three rows. We could use the following code to define this table in HTML:
Here is the result of our table:
in this example, we created a chart with a line of voice, two columns and three rows of the data table. Let’s analyze our code
First , we used the
tag HTML to ask our web page to create a table. We then used a
to create a row and for our table
tags to define the column headers. In this case, our column headers are Coffee and Price.
Next, we used three more
to create each of the three table rows that show the names and prices of our coffees in the data cells of the table . Each of these
contains a
, which is used to represent a column cell in the table. For example, the element td is used to represent Espresso and $ 2.00 in our first coffee entry
Table style
There are several ways we can style a table in HTML.
borders
HTML, tables does not have borders by default. This means that if we want a border to appear on our table, we have to use CSS. The CSS border attribute is used to add a border to an HTML table.
Suppose we want to add a solid black border around our table from before. We could do it using this code:
When we use this style in our table code, our table changes to include a border around each of its cells and the table itself. Here is our revised table:
< / figure>
Now our table has a border, which makes it easier to read the data in our table. However, the style we created above places a border around each cell and separates each border. If we want to collapse each border into one, we can use the border-collapse property. Here is the code we would use to do this:
Our new table would look like this:
as you can see, our table now has a border, rather than a border around each cells and the table itself.
Align Heads
By default, headers are aligned in the center of a cell. If you want to align a header to the left or right of a cell, you can specify a text alignment property to
in the table (remember , the
is used to specify headers)
Here is the code you are using:
If we apply this style to our table from above, the following table is created:
our table - it aligned the in- column headers to the left of our table.
There are many other styles that can be applied to an HTML table, but for the purposes of this tutorial we have focused on borders of the table and the collapsed boundaries. Going forward, we’ll use the styles we defined in this part of the tutorial to make our data easier to read.
Expand to multiple rows and columns
When you working with tables, you may want a cell to cover multiple rows or columns.
For example, suppose we want our price column from previous two columns to span. This is where colspan and rowspan come in. ROWSPAN is used to span multiple rows in a table and colspan is used to span multiple columns in a table.
Here is an example of a table that uses ColSpan to extend the Price column over two columns:
This is what our table looks like:
Shop
Best laptop for Fortnite
$
Best laptop for Excel
$
Best laptop for Solidworks
$
Best laptop for Roblox
$
Best computer for crypto mining
$
Best laptop for Sims 4
$
Best laptop for Zoom
$499
Best laptop for Minecraft
$590
Latest questions
NUMPYNUMPY
psycopg2: insert multiple rows with one query
12 answers
NUMPYNUMPY
How to convert Nonetype to int or string?
12 answers
NUMPYNUMPY
How to specify multiple return types using type-hints
12 answers
NUMPYNUMPY
Javascript Error: IPython is not defined in JupyterLab
