Table task in html

HTML Tables

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

Example

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Define an HTML Table

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

Example

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico

Table Cells

Each table cell is defined by a

and a

tag.

Everything between

and

are the content of the table cell.

Example

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

Table Rows

Each table row starts with a

and ends with a

tag.

Example

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

th stands for table header.

Example

Let the first row be table header cells:

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

HTML Exercises

HTML Table Tags

Tag	Description
	Defines a table
	Defines a header cell in a table
	Defines a row in a table
	Defines a cell in a table
	Defines a table caption
	Specifies a group of one or more columns in a table for formatting
	Specifies column properties for each column within a element
	Groups the header content in a table
	Groups the body content in a table
	Groups the footer content in a table

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

LEARN MORE

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:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML Tables – Table Tutorial with Example Code

Hillary Nyakundi

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.

Common HTML Table tags

HTML Table Syntax:

 
 
Cell 1
 
Cell 2
 
Cell 3
 
 
Cell 4
 
Cell 5
 
Cell 6
 
 
 

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 is used to add headings to tables. In basic designs the table heading will always take the top row, meaning we will have the 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

 
 
First Name
 
Last Name
 
Email Address
 
 
Hillary
 
Nyakundi
 
tables@mail.com
 
 
Lary
 
Mak
 
developer@mail.com
 
 
 

From the example above, we are able to tell what column contains which information. This is made possible with the use of 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 tag.

Caption Syntax

An example with use of

 
Free Coding Resources
 
Sites
 
Youtube Channels
 
Mobile Appss
 
 
Freecode Camp
 
Freecode Camp
 
Enki
 
 
W3Schools
 
Academind
 
Programming Hero
 
 
Khan Academy
 
The Coding Train
 
Solo learn
 
 
 

Free Coding Resources

Sites	Youtube Channels	Mobile Appss
Freecode Camp	Freecode Camp	Enki
W3Schools	Academind	Programming Hero
Khan Academy	The Coding Train	Solo learn

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 , 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

 
 
Semester
 
Grade
 
 
1
 
Jan - April
 
Credit
 
 
2
 
May - August
 
Pass
 
 
2
 
September - December
 
Distinction
 
 
 

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

 
 
Name
 
Subject
 
Marks
 
 
Hillary
 
Advanced Web
 
75
 
 
Operating Syatem
 
60
 
 
Lary
 
Advanced Web
 
80
 
 
Operating Syatem
 
75
 
 
Total Average: 72.5
 
 
 

Name	Subject	Marks
Hillary	Advanced Web	75
	Operating Syatem	60
Lary	Advanced Web	80
	Operating Syatem	75
Total Average: 72.5

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:

• — provides a separate haeder for the table
• — conatins main content of the table
• — creates a separete footer for the table

An Example with use of , &

 
 
 
October
 
November
 
 
 
 
Sales
 
Profit
 
Sales
 
Profit
 
 
$200,00
 
$50,00
 
$300,000
 
$70,000
 
 
 
 
November was more produstive
 
 
 
 

October		November
Sales	Profit	Sales	Profit
$200,00	$50,00	$300,000	$70,000
November was more produstive

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:

• 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.

Wrap Up

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:

Источник

HTML tables

A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little CSS for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.

Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

Prerequisites

Before starting this module, you should already have covered the basics of HTML — see Introduction to HTML.

Note: If you are working on a computer/tablet/other device where you don’t have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

Guides

This module contains the following articles, which will take you through all the fundamentals of creating tables in HTML.

This article gets you started with HTML tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.

This article looks at some more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.

Assessments

The following assessment will test your understanding of the HTML table techniques covered in the guides above.

In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table.

Found a content problem with this page?

This page was last modified on Jun 30, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник