how to create table in html 5

HTML Tutorial

Html graphics, html examples, html references, html tables.

HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

A simple HTML table:

Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row.

You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.

Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:

th stands for table header.

Let the first row be table header cells:

By default, the text in <th> elements are bold and centered, but you can change that with CSS.

HTML Exercises

Test yourself with exercises.

Add a table row with two table headers.

The two table headers should have the value "Name" and "Age".

Start the Exercise

HTML Table Tags

For a complete list of all available HTML tags, visit our HTML Tag Reference .

Styling Tables Filter Table Sort Table Responsive Table Zebra Striped Table

Get started with your own server with Dynamic Spaces

COLOR PICKER

Get your certification today!

how to create table in html 5

Get certified by completing a course today!

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Your Suggestion:

Thank you for helping us.

Your message has been sent to W3Schools.

Top Tutorials

Top references, top examples, web certificates, get certified.

HTML5 Table Tutorial – Create Amazing Tables in HTML5

HTML5 Tables

Tables are not new to HTML but there are a few new tags available in HTML5. To define a table in HTML you need to use the <table> tag. Tables are divided into rows using the <tr> tag. To define the cells in the table you need to use the <td> tag.

Tables can contain column elements, row elements, headers, footers and other elements. This tutorial will show you how to use the various table tags to define these elements and how to format the elements using style sheet options.

HTML5 Table Creation

Here is the code necessary to create your table:

The table will be displayed as follows:

HTML51

Note that HTML defaults to no borders unless you specify a border for the table. To specify borders for your table, you need to add the border element to your table tag:

<table border=”1″ style=”width:300px”>

The table will then look like this:

HTML55

HTML5 Tables – Adding Headers and Footers

You can use the following tabs to create and format the headers and footers for your table:

Cells formatted using the <th> tag will be centered and the text will be bold. Table elements defined using the body tag <td> will be left aligned and the text will be normal.

All HTML5 attributes can be used to format the table using the <thead>, <tbody> and <tfoot> tags. In this tutorial, we will use the color attribute to format the various elements of the table in different colors. We will set the header as green, the body as blue and the footer as red for this tutorial.

Take a look at the following code:

The table will look like this on your page:

HTML53

Note that the Name, Surname and Telephone cells are all center aligned and bold because of the use of the <th> tag.

If you would like to learn more about HTML5 tags, try enrolling in the HTML5 Fundamentals course. This course offers 43 lessons that include all of the HTML fundamentals you need to know to create your own webpages. You will learn to work with text elements and how to format any text elements. The course will teach you how to create lists and links using HTML5. You will learn to work with tables and images and you will learn website basics to ensure your websites work on various browsers.

HTML5 Tables – Formatting Columns

The column group tag allows you to specify formatting to columns within your table. If you want to add specific formatting to columns in your table then you can specify the elements and formats using the <colgroup> tag.

The <colgroup> tag must appear within the table it is being used to format. The span element within the <colgroup> tag can be used to span multiple columns. If no span element is defined, the formatting will be applied to a single column. All HTML formatting attributes can be used for formatting purposes. For our table we will use the background color attribute to format background color of the various columns.

Take a look at the code below:

This is what the table will look like:

HTML54

HTML5 Tables are Easy

Tables are often a great way to present your data. The HTML5 tags make table creation and formatting really simple.

If you are eager to learn how to take advantage of the new HTML5 tags, then sign up to Learn HTML 5 today. This course offers 44 lectures that will teach you all about the HTML building blocks needed to create a page in HTML5. You will learn about the commonly used HTML tags and how to use them in your development. The course will teach you how to create forms and use the form tags. You will learn how to style HTML. Once you are familiar with HTML basics, the course will teach you about advanced HTML concepts like scripting and handling events. The course will help you create responsive, interactive websites using HTML5.

Recommended Articles

Jquery id: manipulating objects using the id in your html.

HTML5 Interview Questions and Answers: A New Standard In Readiness!

Html 5 animation: the newest flash replacement, html5 pdf viewer for ease of viewing pdf files on your website, 7 educational html5 websites that will make your jaw drop, tumblr html codes, html absolute position and other positions, pdf to html: how to convert file formats, psd to html tutorial: tips on converting psd files to web pages, html5 fonts: adding fonts to your webpage, share this article, top courses in html.

More HTML Courses

HTML students also learn

Empower your team. lead the industry..

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy Business.

Related Articles

How to create a table by using HTML5 ?

An HTML table is defined using the “table” tag in the HTML page. Each table row is defined with the “tr” tag. A table header is defined with the “th” tag. By default, table headings are bold and centered. A table data or cell is defined with the “td” tag.

Supported browsers:

Please Login to comment...

Web Technologies

Improve your Coding Skills with Practice

Start your coding journey now.

How to create tables in HTML?

HTML tables allow us to arrange data into rows and columns on the web page.

We use the <table> tag, to create table in HTML. A table consist of rows and columns. Table heading, row and column and table data can be set using one or more <th>, <tr>, and <td> elements.

A table row is defined by the <tr> tag. To set table header,we use <th> tag. To insert data in table cell, use the <td> tag.

A table in HTML consists of table cells inside rows and columns of the table.

Table heading is defined by the <th>...</th>. Data inside the <th> are the headings of the column of a table.

Each table cell is defined by a <td>...</td> tag. Data inside the <td> tag are the content of the table rows and columns.

Each table row starts with a <tr> ....</tr> tag.

We use style sheet to create border for the table.

Following is an example program to create table in HTML.

Following is another example program to create table in HTML.

Now we try to extend our table to our browser tab size using style attribute.

Following is the example program to extend our table to our browser tab size using style attribute.

0 Followers

HTML Tables

In this tutorial you will learn how to display tabular data using HTML tables.

Creating Tables in HTML

HTML table allows you to arrange data into rows and columns. They are commonly used to display tabular data like product listings, customer's details, financial reports, and so on.

You can create a table using the <table> element. Inside the <table> element, you can use the <tr> elements to create rows, and to create columns inside a row you can use the <td> elements. You can also define a cell as a header for a group of table cells using the <th> element.

The following example demonstrates the most basic structure of a table.

Tables do not have any borders by default. You can use the CSS border property to add borders to the tables. Also, table cells are sized just large enough to fit the contents by default. To add more space around the content in the table cells you can use the CSS padding property.

The following style rules add a 1-pixel border to the table and 10-pixels of padding to its cells.

By default, borders around the table and their cells are separated from each other. But you can collapse them into one by using the border-collapse property on the <table> element.

Also, text inside the <th> elements are displayed in bold font, aligned horizontally center in the cell by default. To change the default alignment you can use the CSS text-align property.

The following style rules collapse the table borders and align the table header text to left.

Please check out the tutorial on CSS tables to learn about styling HTML tables in details.

Note: Most of the <table> element's attribute such as border , cellpadding , cellspacing , width , align , etc. for styling table appearances in earlier versions has been dropped in HTML5, so avoid using them. Use CSS to style HTML tables instead.

Spanning Multiple Rows and Columns

Spanning allow you to extend table rows and columns across multiple other rows and columns.

Normally, a table cell cannot pass over into the space below or above another table cell. But, you can use the rowspan or colspan attributes to span multiple rows or columns in a table.

Let's try out the following example to understand how colspan basically works:

Similarly, you can use the rowspan attribute to create a cell that spans more than one row. Let's try out an example to understand how row spanning basically works:

Adding Captions to Tables

You can specify a caption (or title) for your tables using the <caption> element.

The <caption> element must be placed directly after the opening <table> tag. By default, caption appears at the top of the table, but you can change its position using the CSS caption-side property.

The following example shows how to use this element in a table.

Defining a Table Header, Body, and Footer

HTML provides a series of tags <thead> , <tbody> , and <tfoot> that helps you to create more structured table, by defining header, body and footer regions, respectively.

The following example demonstrates the use of these elements.

Note: In HTML5, the <tfoot> element can be placed either before or after the <tbody> and <tr> elements, but must appear after any <caption> , <colgroup> , and <thead> elements.

Tip: Do not use tables for creating web page layouts. Table layouts are slower at rendering, and very difficult to maintain. It should be used only to display tabular data.

Bootstrap UI Design Templates

Is this website helpful to you? Please give us a like , or share your feedback to help us improve . Connect with us on Facebook and Twitter for the latest updates.

Interactive Tools

// Tutorial //

How to create tables in html.

Senior Manager, DevEd

How To Create Tables in HTML

Introduction

A table is a set of data organized by rows and columns. Tables are useful for displaying connections between data types, such as products and their cost, employment and dates employed, or flights and departure times. In this tutorial, you will create a table using HTML, customize it by adding a desired amount of rows and columns, and add row and column headings to make your table easier to read.

Prerequisites

Fundamentals of HTML tables

An HTML table is created with an opening <table> tag and a closing </table> tag. Inside these tags, data is organized into rows and columns by using opening and closing table row <tr> tags and opening and closing table data <td> tags.

Table row <tr> tags are used to create a row of data. Inside opening and closing table <tr> tags, opening and closing table data <td> tags are used to organize data in columns.

As an example, here is a table that has two rows and three columns:

To explore how HTML tables works in practice, paste the code snippet above into the index.html file or other html file you are using for this tutorial.

Save and reload the file in the browser to check your results. (For instructions on loading the file in your browser, please visit this step of our tutorial on HTML Elements.)

Your webpage should now have a table with three columns and two rows:

3 columns, 2 rows table

To add an additional row, add the highlighted <tr> element to the bottom of your table:

Save your results and check them in your browser. You should receive something like this:

3 Columns and 3 Rows Table

To add another column, try adding an additional table data <td> element inside each of the table row <tr> elements:

Save your results and check them in your browser. Your webpage should display a table with three rows and four columns:

Webpage displaying table with three rows and four columns

Adding a Border To a Table

In general, tables should be styled with CSS . If you do not know CSS, you can add some light styling using HTML by adding the attributes to the <table> element. For example, you can add a border to the table with the border attribute:

Add the highlighted border attribute to your table and checking your results in the browser. (You can clear your index.html file and paste in the HTML code snippet above.) Save your file and load it in the browser. Your table should now have a border surrounding each of your rows and columns like this:

Webpage displaying table with border

Adding Headings To Rows and Columns

Headings can be added to rows and columns to make tables easier to read. Table headings are automatically styled with bold and centered text to visually distinguish them from table data. Headings also make tables more accessible as they help individuals using screen readers navigate table data.

Headings are added by using opening and closing <th> tags. To add column headers, you must insert a new <tr> element at the top of your table where you can add the column names using <th> tags.

Clear the index.html file and add a row of column headings with the following code snippet:

Save the index.html file and reload it in your browser. You should receive something like this:

Webpage displaying HTML column headings

Your webpage should display a single row of column headers. Note that the first column header is empty. You may add a column header here if you like.

To add row headers, you must add opening and closing <th> tags as the first item in every table row <tr> element. Add the row headers and data by adding the highlighted code snippet below between the closing </tr> tag and the closing <table> tag of the table in your index.html file:

Webpage displaying table with column and row headings

You should now have a table with with three column headings and three row headings.

In this tutorial, you have created an HTML table, added additional rows and columns, and created headings for rows and columns.

If you are interested in learning more about HTML, you can check our our tutorial series How To Build a Website With HTML . To learn about how to use CSS to style HTML elements (including tables), please visit our tutorial series How To Build a Website With CSS .

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

Open source advocate and lover of education, culture, and community.

Still looking for an answer?

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Creative Commons

Popular Topics

Try DigitalOcean for free

Join the tech talk.

Please complete your information!

HTML Tables – Table Tutorial with Example Code

When you're building a project that needs to represent data visually, you will need a good way to display the information so it's easy to read and understand.

Now, depending on the type of data, you can select between different representation methods using HTML elements.

In most cases, tables are more convenient to display large amounts of structured data nicely. That’s why, in this article, we are going to learn how to use tables in HTML and then how to style them.

Here's an Interactive Scrim about HTML Tables

But, first things first – what is a table in HTML?

What is a Table in HTML?

A table is a representation of data arranged in rows and columns. Really, it's more like a spreadsheet. In HTML, with the help of tables, you can arrange data like images, text, links and so on into rows and columns of cells.

The use of tables in the web has become more popular recently because of the amazing HTML table tags that make it easier to create and design them.

To create a table in HTML you will need to use tags. The most important one is the <table> tag which is the main container of the table. It shows where the table will begin and where it ends.

Common HTML Table tags

Other tags include:

HTML Table Syntax:

Now that you have an understanding of what an HTML table is all about and how you can create it, let's go ahead and see how we can make use of these tags to create tables with more features.

How to Add a Table Heading in HTML

The <th> is used to add headings to tables. In basic designs the table heading will always take the top row, meaning we will have the <th> declared in our first table row followed by the actual data in the table. By default the text passed in the Heading is centered and Bold.

An example with use of <th>

From the example above, we are able to tell what column contains which information. This is made possible with the use of <th> tag.

How to Add a Caption to a Table

The main use of adding a caption to table is to provide a description about the data represented in the table. The caption can either be placed at the top of the table or the bottom and by default it will always be centered.

To insert a caption into a table, use the <caption> tag.

Caption Syntax

An example with use of <caption>

How to Use the Scope Attribute in HTML Tables

The scope attribute is used to define whether a specific header is intended for either a column, row, or a group of both. I know the definition might be challenging to understand but hold on – with the help of an example you will better understand it.

The main purpose of the scope element is to show the target data so that the user does not have to rely on assumptions. The attribute is declared in the header cell <th> , and it takes the values col , row , colgroup and rowgroup .

The values col and row indicated that the header cell is providing inforamation for either the rows or columns respectively.

Scope Syntax

An Example with use of <scope>

What the scope attribute has done, is that it shows whether a header cell belongs to either the column, row, or a group of both.

In this case the headers belong to the column because it's what we set in the code. You can play around by changing the attribute to see the different behaviors.

How to Use Cell Spanning in an HTML Table

Perhaps you have come across cells that stretch across two or more columns or rows in a table. That's called cell spanning.

If you worked in programs like MS office or Excel you have probably used the function by highlighting the cells and clicking the command, and voilà! You have it.

The same features can be applied in an HTML table by using two cell attributes, colspan for horizontal spanning and rowspan for vertical spanning. The two attributes are assigned numbers greater that zero which shows the number of cells you wish to span.

An Example with use of span

In the example above, we have a cell spanning of 2 cells in the rows and 3 cells in the column as indicated. We have managed to apply the span both vertically and horizontally.

When using the attributes colspan and rowspan , make sure to declare the values assigned correclty to avoid overlapping of cells.

How to Add a Table Header, Body, & Footer in HTML Tables

Just like how a website or any other document has three main sections – the header, body, and footer – so does a table.

In a table they are divided by using attributes namely:

An Example with use of <thead> , <tbody> & <tfoot>

In the above example, the header is represented by the name of the months, the part with the figures of both sales and profit represents the table body, and finally the part with the statement represents the footer of our table.

Another important thing to note is that a table can have more than one body part. In a scenario like this each body groups the rows that are related together.

How to Style HTML Tables using CSS

Even though tables are widely used today, it is very rare to find one that has not been styled. Most of them use different forms of styles, whether that's colors, fonts, highlighting important values and so on.

Styling helps make the tables appear proffesional and appealing to the eyes. Afterall you wouldn't want your reader to stare at data divided by only a sinle line.

Unlike styling with other languages or tools, in HTML you will need to get an extra file with a .css extension created where you will add your styles and link it to your HTML file.

Below, attached is a code playground with an example of a styled table. Feel free to play around with it to see how different styling will affect the display.

The code playground above, we have created a table and styled it using some of the attributes we covered in the article.

We styled it using a CSS file, where we have added the color and border to our table to make it more readable and beautiful. The table also has a fixed header so you can scroll through the large amount of data and still see the header of a particular column.

So, we have seen what a table is, we've created a few of them, and even gone a step ahead and applied styling.

But having the knowledge and not knowing how to apply it won't be of any help. So that being said, where or when do you need to make use of tables in your design?

When to Use a Table

There are many situations where tables might come in handy when developing your projects:

Tables are a great way to represent tabular data, and you can create them using basic HTML elements like <table> , <tr> , <td> .

And you can also add some styling to make them look good and present the data clearly with the help of a CSS file.

Before we wrap up, let's do one more task:

Create a table using what we learned to summarize what we have covered in the article today. After that compare your design with my pinned code playground below:

Growing Developer || Python & Open-Source ❤ || Tech Enthusiasts & Writer ✍ "Every day is a learning Day"

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

IMAGES

How to create HTML Table
how to create table use html
勧める置き場授業料 html table title
Create a given table in HTML
Politică Punct de start Înţelegere compromite Concurs preot how to create html table in c
Learn HTML: How to create tables in HTML ?

VIDEO

Table
Create a Table in MySQL #shorts
HTML Table and Lists
Loan Amortization Schedule in Excel in Tamil
Morphman 2
how to create table in html

COMMENTS

HTML Tables
A table in HTML consists of table cells inside rows and columns. Example. A simple HTML table: <table> <tr>
HTML5 Table Tutorial
Tables are not new to HTML but there are a few new tags available in HTML5. To define a table in HTML you need to use the <table> tag. Tables are divided into
How to create a table by using HTML5 ?
An HTML table is defined using the “table” tag in the HTML page. Each table row is defined with the “tr” tag. A table header is defined with the
How to Create Tables in HTML
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmapLearn how to create tables in HTML. In this HTML5 table tutorial
How to Create Tables with HTML5
The table structure starts with an opening <table> tag. You can also set a table class to design the table with your CSS file. Think of a table as a spreadsheet
How to create tables in HTML
We use the <table> tag, to create table in HTML. A table consist of rows and columns. Table heading, row and column and table data can be set
How to Create HTML Tables
You can create a table using the <table> element. Inside the <table> element, you can use the <tr> elements to create rows, and to create columns inside a row
How To Create Tables in HTML
HTML tables are useful for arranging tabular data in rows and columns. In this tutorial, you will create a table using HTML, customize it by
HTML Tables
A table is a representation of data arranged in rows and columns. Really, it's more like a spreadsheet. In HTML, with the help of tables, you
HTML table basics
This article gets you started with HTML tables, covering the very basics such as rows, cells, headings, making cells span multiple columns