how to create table in html 5

• Awards Season
• Big Stories
• Pop Culture
• Video Games
• Celebrities

Learn the Basics of HTML: A Step-by-Step Guide

HTML (HyperText Markup Language) is the language used to create webpages and is an essential part of web development. It is easy to learn and can be used to create simple or complex websites. This guide will provide a step-by-step introduction to the basics of HTML so you can get started creating your own webpages.

Understanding HTML Tags

HTML tags are used to structure the content on a webpage. They are written in angle brackets, with an opening tag and a closing tag. For example,

is the opening tag for a heading and

is the closing tag. Each tag has its own purpose and can be used to add structure, formatting, and other elements to a webpage.

Creating Your First Webpage

Now that you understand HTML tags, it’s time to create your first webpage. Start by creating a new file in your text editor and save it as “index.html”. This will be the main page of your website. You will then need to add some basic HTML tags such as ,

Once you have added the basic HTML tags, you can start adding content to your webpage. You can use text, images, videos, links, and other elements to create an engaging user experience. To add content, you will need to use specific HTML tags such as

for paragraphs, for images, and for links. You can also use CSS (Cascading Style Sheets) to style your webpage with colors, fonts, backgrounds, etc.

Learning HTML is an important skill for anyone interested in web development or creating their own website. With this guide as a starting point, you should now have all the tools you need to get started with HTML and begin creating your own webpages.

This text was generated using a large language model, and select text has been reviewed and moderated for purposes such as readability.

MORE FROM ASK.COM

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.

Advertisement

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

COLOR PICKER

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]

Top Tutorials

Top references, top examples, get certified.

• Free CSS Course
• CSS Selectors
• CSS Properties
• CSS Functions
• CSS Examples

• Explore Our Geeks Community
• How to Set Color of Progress Bar using HTML and CSS ?
• How to add an image as the list-item marker in a list using CSS ?
• How to place text on image using HTML and CSS?
• How to Create an Email Newsletter ?
• How to Create Text Reveal Effect for Buttons using HTML and CSS ?
• How to make a div span two rows in a grid using CSS ?
• How to Create Animation Loading Bar using CSS ?
• Why Transition properties does not work with display properties ?
• How to set a regular expression for an input element value that checked against using HTML ?
• How to specify a short hint that describes the expected value of an input element using HTML ?
• How to create Right Aligned Menu Links using HTML and CSS ?
• How to Create Text Changing Animation Effect using CSS ?
• GlassmorphismUI Animation
• How to add filter to the background image using CSS ?
• How to specify that an input element should be disabled ?
• How to remove border from an editable element using CSS ?
• How to Draw a Trapezium using HTML and CSS ?
• How to specify an input field is read-only in HTML ?
• How to create multilayered text effect using HTML and CSS?

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:

• Google Chrome
• Internet Explorer

Please Login to comment...

• Web Technologies

Please write us at contrib[email protected] to report any issue with the above content

Improve your Coding Skills with Practice

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:

• <tr> - represents rows
• <td> - used to create data cells
• <th> - used to add table headings
• <caption> - used to insert captions
• <thead> - adds a separate header to the table
• <tbody> - shows the main body of the table
• <tfoot> - creates a separate footer for the table

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:

• <thead> - provides a separate haeder for the table
• <tbody> - conatins main content of the table
• <tfoot> - creates a separete footer for the table

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. After all, you wouldn't want your reader to stare at data divided by only a single 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.

In 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:

• You can use tables when you want to compare and contrast data with shared characteristics like the differences between A and B or scores of team X to those of Y.
• You can also use one if you want to give an overview of numerical data. A good example of this is when you are trying to represent marks of students or even the scores of teams like the EPL table.
• And a table can help readers quickly find specific information laid out in a clear way. For example if you are going through a long list of name a table can be used to sub devide the list which make it easy for readers.

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:

Technical Writer ✍️ & Open-Source Enthusiast ❤ || Empowering Developers to Learn & Grow || Committed to Making a Meaningful Contribution to the Tech Community and Beyond.

If you read this far, thank the author to show them you care. Say Thanks

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

• Cloud Technologies
• Computer Science
• Cybersecurity
• IT Services
• Masters and Certificate Programs
• Networking and Hardware
• Operating System
• Programming
• QA and Testing
• Web Development
• Software Tools
• Career Guides
• Learn why Cybersecurity is essential
• Learn about the 4Vs of Big Data
• An Ethical Hacker's guide for getting from beginner to professional
• Data Science Basics
• Data Science for Healthcare
• Deep Learning
• Machine Learning
• Learn more about different versions of Python
• How to get started with Data Science?
• Learn about the difference between AI and ML
• What's New
• How to Use Midjourney AI for Creating a Masterpiece Art?
• Data Analyst Salary in India
• Conditional Statements in Python – Python Tutorial
• Random Forest Algorithm: Python Code
• Business Analytics
• Business Tools
• Communication
• Entrepreneurship
• Human Resources
• Industry Programs
• Logistics and Supply Chain
• Masters and PG-Management
• Product Management
• Strategy and Leadership
• Project Management
• What are the latest trends in Recruitment?
• What are the traits required to become a successful Entrepreneur?
• Your guide to become a Business Analyst
• Henri Fayol’s 14 Principles of Management with Examples
• Top 122 SEO Interview Questions and Answers
• Top 91 Marketing Interview Questions and Answers
• Using 7 QC Tools For Quality Improvement and Customer Satisfaction
• Bachelors Program
• Masters Program
• Creativity and Design
• Emerging Technologies
• Engineering-Non CS
• Energy and Environment
• Social Sciences
• Personal Development
• Indifference Curve: Properties and More
• What is Wireless Networking?
• Different characteristics of cloud computing
• What is a Network Component?
• Goto Statement in C

Creating HTML Tables (Tutorial With Examples)

This guide offers an introduction to HTML tables. You will learn how to create tables in HTML to present tabular data.

Tables are a great way to present data visually. Tables allow us to display large amounts of data in a structured way (rows and columns) that is easy to read and understand. In this blog, we will learn about HTML tables.

You will understand the basics of HTML tables, such as rows, cells, adding captions, and making cells span multiple columns and rows. You will also learn how to add padding and background color in HTML tables.

Explore  Popular HTML Courses

Table of Contents

What is an html table.

• Table tag in HTML

HTML Table Syntax

Adding border to an html table, adding collapsed borders to an html table.

• Padding in a Table

Spanning Multiple Rows and Columns

Adding captions to tables, adding a background color to a table.

A table in HTML refers to the arrangement of data in rows and columns. Using tables, we can display data, such as products and their prices; employees, their date of joining and salaries; or flights, their ticket prices, and departure times.

Check out: HTML Heading and Paragraph Tags Explained With Examples

Table Tag in HTML

Table tag in HTML, is used to display data in tabular format (i.e. in row-column format). These table tags manages the layout of the page (i.e. Header, Body Content etc.).

To create a table in HTML, you will need to define the table with the <table> tag. The <table> tag is the table container specifying where the table will begin and where it ends.

You can add a table row with the <tr> tag. We will need to use the <th> tag to add a table header. A table cell or data can be added using the <td> tag.

Common HTML Table Tags

Now, let us understand how to create tables in HTML.

Explore free HTML courses

Here is the syntax to create a table with two rows and two columns:

If you want to add another column – Column 3, you can add table data <td> element inside each of the table rows <tr> elements:

Now, again save your results in notepad using the .html extension and check them in your browser.

By default, HTM tables do not have a border. We can set the border using the CSS border property. Let’s look at an example to add a 1-pixel border to the HTML table.

The borders around the cells and the table are separated from each other, by default. We can use the CSS border-collapse property to add a collapsed border in HTML.

Also, by default, the text inside the <th> elements is aligned horizontally center and displayed in bold font. We can change the default alignment using the CSS text-align property.

Let’s check out the below example to collapse the table borders and align the table header text to left.

 Output:

Adding Padding to a Table

To add more space to the table cells, we can use the CSS padding property.

Here is the syntax to add a 1-pixel border to the table and 20-pixels of padding.

With the rowspan and colspan attributes, we can make table rows and columns extend across multiple other rows and columns. In simple words, we can merge two or more rows into a single row; or two or more columns into a single column using the rowspan and colspan attributes respectively.

Now, let’s check out an example to see how rowspan and colspan work:

Rowspan Example:

Colspan Example :

We can use the <caption> element to add a caption or title to our table. The <caption> element should be present after the opening <table> tag.

By default, the caption is displayed at the top of the table. We can change its placement using the CSS caption-side property.

Example to add a caption to a table:

We can add a background to an HTML table using the background-color option.

Example to show how to add color to an HTML table:

In this blog, we covered how to create tables in HTML documents using using the basic HTML tags , such as <table>,<tr>, and <td>.

If you are keen to learn more about HTML5 and are looking for the best HTML courses to start your journey, then you can explore popular HTML courses online here.

Download this article as PDF to read offline

• Share this :

This is a collection of insightful articles from domain experts in the fields of Cloud Computing, DevOps, AWS, Data Science, Machine Learning, AI, and Natural Language Processing. The range of topics caters to upski... Read Full Bio

Trending Technology Courses

Top Picks & New Arrivals

We use cookies to improve your experience. By continuing to browse the site, you agree to our Privacy Policy and Cookie Policy .

• Trending Categories

• Selected Reading
• UPSC IAS Exams Notes
• Developer's Best Practices
• Questions and Answers
• Effective Resume Writing
• HR Interview Questions
• Computer Glossary

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.

• Related Articles
• How to create nest tables within tables in HTML?
• Create A Form Using HTML Tables?
• How to use tables to structurize forms in HTML?
• HTML Tables
• How to Parse HTML pages to fetch HTML tables with Python?
• How to save HTML Tables data to CSV in Python
• How to create multi-column layout in HTML5 using tables?
• How to create and populate Java array of Hash tables?
• How to create headings in HTML page?
• How to create Paragraphs in HTML Page?
• How to create table header in HTML?
• How to create hidden comments in HTML?
• How to create table footer in HTML?
• How to create table heading in HTML?
• In HTML how to create table header?

Kickstart Your Career

Get certified by completing the course

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.

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

HTML Tables: When to Use Them and How to Make & Edit Them

Published: July 14, 2022

While a CMS or website builder will offer a module to create tables with a click of a button, you can create tables from scratch with some basic HTML and CSS.

HTML tables can help you display large amounts of data in a way that's easy to scan, compare, and analyze. For example, you may use a table on your pricing page to allow prospects to compare the key features of your pricing plans. 

In this post, we'll go over everything you need to know about the HTML table element, including:

• why make a table in HTML
• when to use (and not use) HTML tables
• how to make a basic table in HTML
• the table border
• the table padding
• the table header
• the table column width
• the table column span
• the table background color
• how to change the font size of a table cell
• how to center a table
• how to create a table within a table

Why Make a Table in HTML

Tables allow the reader to see results or conclusions at a glance, rather than poring over text to find the numeric data or key points. Making a post or page more readable in this way can help attract and keep visitors on your site and ultimately improve their user experience .

That’s why we use tables across the HubSpot blogs. Below is a table at the end of SiteGround vs. HostGator Review , which summarizes the 2,000-word article in less than 200 words.

While this table was built with a click of a button in CMS Hub , you can also use HTML and CSS to make tables from scratch.

Let's walk through some specific use cases for HTML tables below.

When to Use HTML Tables

When creating a blog post or web page, you might want to include data that isn’t best represented by text. Say you want to display a breakdown of the diversity of your workforce. Since this data would be too complicated or detailed to simply write out, you could use tables to organize and present it.

Here are some other use cases for HTML tables:

• summarizing a blog post comparing multiple tools
• displaying key features of pricing plans for comparison
• showing the store hours of your retail location on your website
• reporting precise values, like the loading speed of the fastest WordPress themes
• displaying data with different units of measurement, like rank and percentage

While tables can be a great addition to some blog posts, pricing tables, and more, they should not be used for certain purposes. Let's quickly look at those below.

When Not to Use HTML Tables

HTML tables should be used for displaying and organizing any type of tabular data. They should not be used for laying out web pages. This was a technique used in the past when CSS was less advanced and web browsers did not consistently and reliably support CSS positioning. Now, CSS has multiple layout techniques, including the display property, flexbox, and grid, that are more powerful than HTML tables and are widely supported by web browsers.

Below are the most common reasons to avoid using HTML tables for layout:

• Complex code : Table layouts generally involve more complex markup structures than proper layout techniques, in part because they often include multiple layers of nested tables. That means it is harder to write, maintain, and debug code for table layouts.
• Accessibility issue : Because of their complex markup structures, layouts built with tables pose accessibility issues for visually impaired users and other types of users with screen readers. The main issue is that content in a table layout doesn't always make sense when read left-to-right and top-to-bottom. Nested tables and various spans and attributes on table cells can also be difficult for a screen reader to parse.
• Lack of responsiveness : By default, tables are sized according to their content. So additional code is required to optimize table layouts for a variety of devices. Flexbox, CSS Grid, and Bootstrap , on the other hand, are all responsive layout models.

Now that we have a better understanding of why and when to use (and not use) HTML tables, let's walk through the process of making one below.

How to Make a Table in HTML

To make a table in HTML, use the <table> tag. Within this table tag, you’ll place the <tr>, <th>, and <td> tags.

• The <tr> tag defines a table row.
• The <th> tag defines the table header. By default, any text in the <th> tag is bold and centered.
• The <td> tag defines the table data (ie. table cells). By default, any text in the <td> tag is unbolded and left-aligned.

It’s important to note that the <td> tag can contain a range of HTML elements — not just text. Possible elements include images, numbered or bulleted lists, and other tables.

For a visual walkthrough of how to create a table using HTML only, take a look at this video.

You can also use the Bootstrap CSS framework to create stylish tables.

Check out A Walkthrough of the Bootstrap CSS Table Element to learn how.

HTML Table Example

Let’s say you’re creating a table for contact information of your staff. You want to list the name, job title, and email address of each of your three employees. In that case, you’d need three columns and four rows.

That first row would be the header of your table. Here you’d label each column by wrapping the following text — Name, Job Title, and Email Address — in <th> tags. Here’s what that code would look like:

Then you’d create three more rows. Within these <tr> tags, you’d place <td> tags containing the name, job title, and email address of each employee. Here’s what the code would look like for the second row:

You’d then wrap all four rows in the <table> tag. All together, your code would look something like this:

Here’s how the table would look on the front end of your website:

Notice that each column is just wide enough to fit the text, and that there are no borders separating one column or row from the next. The result is cluttered-looking and difficult to read.

Below we’ll look at some ways you can make this table easier to read.

For a visual walkthrough of how to create a more complex HTML table example with HTML and CSS, check out this video by FollowAndrew:

Editing the Table Border

Pro tip : Edit the table border to help the reader understand the relationship among the values, and read the data from left to right and top to bottom. 

Tables do not have any borders by default. To add borders, use the CSS border property.

Let’s say I want to add a simple black border around my table above. Then I’d just need to add the following CSS in the head section of my HTML file or in my external stylesheet.

The HTML in the body section of the HTML file would stay the same.

Here’s how that would look on the front end:

Notice that the borders around the table, table header, and tables cells are separated from each other. To collapse them, use the CSS border-collapse property. You’d simply add this property to your CSS rule set, and set the value to “collapse.” Here’s how your CSS would look now:

Again, the HTML stays the same.

Adding borders has already helped make this table easier to read by clearly delineating which values are names, which are job titles, and which are email addresses — but it still looks congested. Let’s look at how we can add more white space to this table.

Editing the Table Padding

Pro tip : Add padding to a table to make it appear less congested and easier to read. 

As mentioned above, tables are only as large as their content requires by default. So your second step is to add more space around the content within the table cells. To do so, use the CSS padding property .

Since padding specifies the space between a cell’s content and its border, you only need to add padding to the table header and table data elements, not the table element itself. That means you’ll create a new CSS rule set that only uses two CSS selectors : th and td. You’d then set the CSS padding property to whatever value you want. Below I’ll set it to 10px.

Here’s what the CSS would look like:

The HTML stays the same.

The table is looking much clearer now, but it's still difficult to cross reference the data. We can make that easier by differentiating the header from the other cells. Let’s look at how below.

Editing the Table Header

Pro tip : Edit the table header to distinguish the categories of data from the data points. 

To make the table header stand out, you can do something as simple as add a background color to those cells. You’d just need to use the element selector “th” to apply unique style properties to the header only.

Below, you’ll use the same CSS as above but add a third rule set that contains the CSS background-color property . You can then set the property to a specific color value using a hex color code . For this example, I’ll use a hex color code for a soft shade of yellow.

Here’s the CSS:

With the header styled, it's easier to scan the table for names, job titles, and email addresses. Some more negative space might make it even easier to scan. Let's look at how to add some by styling a column below.

Editing the Table Column Width

Pro tip : Edit the table column width to add more whitespace in a table. 

If you had to guess how to style a column, you might think you’d have to add a style attribute to the cell of each row. That’d be frustrating, right? The good news is you don’t have to.

You can use the <colgroup> tag instead. This tag specifies a group of one or more columns in a table so you can apply CSS to columns rather than cell by cell.

To create this group, you’d add the <colgroup> tag to the body section of your HTML file. Within this tag, you’d then add a <col> tag for every column in your table or every column you want to style. Here’s what the HTML code looks like:

You can then target this group of columns with CSS. Let’s say you don’t want to just specify the padding — or space between a cell’s content and its border — you also want to specify the width of each column. Then you could add another rule set to your CSS and define the width property.

Here’s how the CSS would look:

Here’s how the HTML would look:

Let’s say you’d like to change the width of only one column, like the column containing email addresses. Instead of adding internal CSS to the head section of your HTML file, you could simply add a style attribute to the third <col> tag in the body section. Within that attribute, you’d add and specify the width property. Here’s how the <colgroup> tag would look:

Specifying the column width of your table in this way can provide more space for longer inputs, like email addresses. 

In addition to changing the column width of an HTML table, you can make a cell span multiple columns. Let's look at how.

HTML Table Column Span

Pro tip : Use a column span if presenting two columns of data that are related, like cell phone and home phone numbers. 

In some instances, it makes sense for a cell to span multiple columns. For example, a header cell that titles a group of columns should span more than one column. 

To make a cell span more than one column, you can use the colspan attribute. Simply add it to the opening tag of the table header (or a table cell) and set it to the number of columns you want it to span. 

For the example below, let’s say you’d like to add both the cell and home phone number of your staff members to the table. In that case you'd add new <th> tag with a colspan attribute set to "2." Then, you'd add two more <td> tags containing the employees' phone numbers to each row. 

Note: we'll use the same CSS from the example above.

Here's how the HTML would look:

   <table>

  <colgroup>

    <col>

  </colgroup>

  <tr>

    <th>Name</th>

    <th>Job Title</th> 

    <th>Email address</th>

    <th colspan="2">Telephone</th>

  </tr>

    <td>Anna Fitzgerald</td>

    <td>Staff Writer</td>

    <td>[email protected]</td>

    <td>888-888-880</td>

    <td>888-888-881</td>

    <td>John Smith</td>

    <td>Marketing Manager</td>

    <td>[email protected]</td>

    <td>888-888-882</td>

    <td>888-888-883</td>

    <td>Zendaya Grace</td>

    <td>CEO</td>

    <td>888-888-884</td>

    <td>888-888-885</td>

</table>

Now that you’ve changed the padding, column width, alignment, and more of your table, you might be looking for a few more ways to make your table stand out on the page. One way is to change the background color of not just the header but the whole table. Let’s go over how.

Editing the Table Background Color

Pro tip : Edit the table background color to differentiate a table from other elements on a web page and draw the reader's eye. 

To change the background color of the whole table, not just the table header, then you simply define the CSS background color property for both the table header and table data elements. Here’s how your CSS would look:

<table>

    <col style="width:300px">

Changing the background color of your table can help it stand out on a web page and draw the visitor's eye to important information it contains. 

If you’d like the table header and table data elements to have different background colors, then simply use the two element selectors, “th” and “td,” and set the background color property to different hex color codes or color names.

Here’s what the CSS might look like:

Changing both the header and background color of a table can ensure it stands out on the page and allows readers to easily cross reference the data. 

Another way you can make sure your table is not getting lost among other content on the page is to increase its font size. Below we’ll look at how.

HTML Table Font Size

Pro tip : Increase the font size of the table header to grab the reader's attention and help them slow down when reading through the table data elements. 

To change the size of the font in an HTML table, use the CSS font-size property . You can use this property for the table header and table data elements. But let’s say you want to increase the font size of the table header only.

Then your CSS would look like this:

Your HTML would stay the same.

Changing the font size is another way to differentiate the header from the rest of the data in a table, which can make it easier to scan. 

Once you’re mostly happy with the appearance of your table, you might be interested in changing its position on the page. One way you can do that is by changing its default alignment. Let’s look at how below.

Centering a Table In HTML

Pro tip : Center a table to set it apart from the rest of the left-aligned content on a web page.  

By default, elements, including the table element, will be left-aligned on the page. If you’d like to center it on the page, use the CSS margin property.

First, you’ll add a class name to the table element. In the example below, I’ll use the name “center.” Then you can use the class selector to center align the table element only. The other elements on the page will remain left aligned. Here’s how the HTML will look:

You’ll then add another rule set to your CSS. Using the class selector “.center”, you’ll set the margin-left and margin-right properties to “auto.” That way, the table will take up whatever width is specified by CSS or by the content it contains and the browser will ensure the remaining space is split equally between the left and right margins.

Here’s how the CSS would look all together:

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

  padding: 10px;

  background-color: #FFB500;

  font-size: 20px;

  }

  background-color: #FDDF95;

  margin-left: auto;

  margin-right: auto;

Nesting Tables in HTML

Pro tip : Nest a table within a table to create a complex, visually interesting table layout. 

You can nest tables — or create tables within tables — in HTML. To make a nested table, simply create another table element with table header, table row, and table data tags and place it inside any <td> tag of the existing table. 

Let's say I want to list the home and cell phone of a staff member in a nested table. 

Here's how the CSS might look: 

  background-color: #EEEEEE;

Here's how the HTML might look:

    <th>Nested Table</th>

    <td>

      <table>

            <tr>

              <th id="nested">Home Phone</th>

              <th id="nested">Cell Phone</th>

            </tr>

              <td>888-888-880</td>

              <td>888-888-881</td>

             </tr>

        </table>

      </td>

Here's how that would look on the front end:

Making Tables in HTML

If you want to share large amounts of data on your website, then use tables to present this data in a way that’s easy for visitors to read and understand. Any of the steps described above can help you add and customize tables to your unique website. You’ll just need to be familiar with some HTML and CSS.

Editor's note: This post was originally published in September 2020 and has been updated for comprehensiveness.

Don't forget to share this post!

Related articles.

60 Best HTML Interview Questions and Answers in 2023

How the Form Tag in HTML Enhances Your Webpages

How to Use HTML Escape Characters to Improve Your Code

PHP vs HTML: What are the differences?

HTML Datalist: What is it and How is it Used?

Unlock the Code: Decoding the Hidden Gems of HTML Entities

Superscript in HTML Uncovered: Tips and Codes to Elevate Your Web Text Game!

Unlock the Basics of HTML Fieldsets: Why You Should Be Using Them Right Now

Styling Like a Pro: Untangling the Mysteries of the HTML Style Tag

HTML Video: The Beginner's Guide

Dozens of free coding templates you can start using right now.