Fundamentals of HTML tables – An HTML table is created with an opening
tag and a closing
tag. Inside these tags, data is organized into rows and columns by using opening and closing table row
tags and opening and closing table data
tags. Table row
tags are used to create a row of data. Inside opening and closing table
tags, opening and closing table data
tags are used to organize data in columns. As an example, here is a table that has two rows and three columns: table > tr > td > Column 1 td > Column 2 td > Column 3 tr > td > Column 1 td > Column 2 td > Column 3 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: To add an additional row, add the highlighted
element to the bottom of your table: table > tr > td > Column 1 td > Column 2 td > Column 3 tr > td > Column 1 td > Column 2 td > Column 3 tr > td > Column 1 td > Column 2 td > Column 3 Save your results and check them in your browser. You should receive something like this: To add another column, try adding an additional table data
element inside each of the table row
elements: table > tr > td > Column 1 td > Column 2 td > Column 3 td > Column 4 tr > td > Column 1 td > Column 2 td > Column 3 td > Column 4 tr > td > Column 1 td > Column 2 td > Column 3 td > Column 4 Save your results and check them in your browser. Your webpage should display a table with three rows and four columns:
What is the HTML code for table row?
The
tag defines a row in an HTML table. A
element contains one or more
or
elements.
How can you create a table with 4 rows and 3 columns in HTML?
To create a table without columns in HTML, you would have to use a different element, such as a list, to display the content. To create a table with 4 rows and 3 columns in HTML, you can use the
tag along with the
,
, and
tags.
How do you style a table in HTML?
Table styling quick tips – Before moving on, we thought we’d provide you with a quick list of the most useful points illustrated above:
Make your table markup as simple as possible, and keep things flexible, e.g. by using percentages, so the design is more responsive.
Use table-layout : fixed to create a more predictable table layout that allows you to easily set column widths by setting width on their headings (
).
Use border-collapse : collapse to make table elements borders collapse into each other, producing a neater and easier to control look.
Use
,
, and to break up your table into logical chunks and provide extra places to apply CSS to, so it is easier to layer styles on top of one another if required.
Use zebra striping to make alternative rows easier to read.
Use text-align to line up your
and
text, to make things neater and easier to follow.
How to display table data in HTML?
HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row. We can create a table to display data in tabular form, using
element, with the help of
,
, and
elements.
How to add columns in HTML?
Add Columns – Columns are defined by the amount of cells within a row, so the amount of columns in a table equals the amount of cells in each row. In order to add a column to the table, you’ll need to insert a
HTML tag within each row. Also, make sure that you add the
HTML tag to ALL the rows so that you don’t get an unbalanced table. More information on editing tables via HTML can be found through a quick web search,
How do you set rows in HTML?
The
HTML element defines a row of cells in a table. The row’s cells can then be established using a mix of
(data cell) and
(header cell) elements.
What is list in HTML?
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:
Ordered List or Numbered List (ol)
Unordered List or Bulleted List (ul)
Description List or Definition List (dl)
How do I merge 3 rows in HTML?
It can be done by using the rowspan and colspan attribute in HTML. The rowspan is used to merge or combine the number of cells in a row whereas the colspan is used to merge column cells in a table.
How to do rows and columns in HTML?
To make an HTML table use the
element. You can use
to create rows,
to create columns, and
to create table headers.
What is a table in CSS?
CSS Tables A table in CSS is used to apply the various styling properties to the elements to arrange the data in rows and columns, or possibly in a more complex structure in a properly organized manner. Tables are widely used in communication, research, and data analysis.
cells, rows, and columns.
Properties:
: It is used for specifying borders in the table.
Syntax:
border: table_width table_color; Example 1: This example describes the CSS Table to apply the border property.
< html >
< head >
< style >
body
h1
table,
th,
td
< body >
< h1 >GeeksforGeeks
< h2 >Add border to table:
< table >
< tr >
< th >Roll No.
< th >Name
< tr >
< td >1
< td >A_B_C
< tr >
< td >2
< td >X_Y_Z
Output: : The border-collapse property tells us whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style. Syntax: border-collapse: collapse/separate; Example 2: This example describes the CSS Table by applying the border-collapse property.
< html >
< head >
< style >
body
h1
table.one
table.two
table,
td,
th
< body >
< h1 >GeeksforGeeks
< h2 >borders collapsed:
< table class = "one" >
< tr >
< th >Roll Number
< th >Name
< tr >
< td >1
< td >A_B_C
< tr >
< td >2
< td >X_Y_Z
< br >
< br >
< h2 >borders separated:
< table class = "two" >
< tr >
< th >Roll Number
< th >Name
< tr >
< td >1
< td >A_B_C
< tr >
< td >2
< td >X_Y_Z
Output: : This property specifies the space between the borders of the adjacent cells. Syntax: border-spacing: value; Example 3: This example describes the CSS Table by applying the border-spacing property.
< html >
< head >
< style >
body
h1
table.one
table.two
table,
td,
th
< body >
< h1 >GeeksforGeeks
< h2 >border spacing:
< table class = "one" >
< tr >
< th >Roll Number
< th >Name
< tr >
< td >1
< td >A_B_C
< tr >
< td >2
< td >X_Y_Z
< br >
< br >
< h2 >border spacing:
< table class = "two" >
< tr >
< th >Roll Number
< th >Name
< tr >
< td >1
< td >A_B_C
< tr >
< td >2
< td >X_Y_Z
Output: : Caption side property is used for controlling the placement of caption in the table. By default, captions are placed above the table. Syntax: caption-side: top/bottom; Example 4: This example describes the CSS Table by applying the caption-side property to control the placement of the Table caption.
< html >
< head >
< style >
body
h1
table.one
table.two
table,
td,
th
< body >
< h1 >GeeksforGeeks
< h2 >Caption on top:
< table class = "one" >
< caption >Caption at the top of the table.
< tr >
< th >Roll Number
< th >Name
< tr >
< td >1
< td >A_B_C
< tr >
< td >2
< td >X_Y_Z
< br >
< br >
< h2 >Caption at bottom:
< table class = "two" >
< caption > Caption at the bottom of the table
< tr >
< th >Roll Number
< th >Name
< tr >
< td >1
< td >A_B_C
< tr >
< td >2
< td >X_Y_Z
Output: : This property specifies whether or not to display borders and background on empty cells in a table. Syntax: empty-cells:show/hide; Example 5: This example describes the CSS Table by applying the empty-cell property that specifies whether to display the borders or not in the empty cells in a table.
< html >
< head >
< style >
body
h1
table.one
table.two
table,
td,
th
< body >
< h1 >GeeksforGeeks
< h2 >empty cells hide:
< table class = "one" >
< tr >
< th >Roll Number
< th >Name
< tr >
< td >1
< td >
< tr >
< td >2
< td >X_Y_Z
< br >
< br >
< h2 >empty cells show:
< table class = "two" >
< tr >
< th >Roll Number
< th >Name
< tr >
< td >1
< td >
< tr >
< td >2
< td >X_Y_Z
Output: : The table layout property is used to set up the layout algorithm used for the table. Syntax: table-layout:auto/fixed; Example 6: This example describes the CSS Table by applying the table layout property.
< html >
< head >
< style >
body
h1
table.one
table.two
table,
td,
th
< body >
< h1 >GeeksforGeeks
< h2 >auto table layout:
< table class = "one" >
< tr >
< th >Roll Number
< th >Name
< tr >
< td >1
< td >A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P
< tr >
< td >2
< td >X_Y_Z
< br >
< br >
< h2 >fixed table layout:
< table class = "two" >
< tr >
< th >Roll Number
< th >Name
< tr >
< td >1
< td >A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P
< tr >
< td >2
< td >X_Y_Z
Output: Supported Browsers: The browsers supported by Tables
Google Chrome
Edge
Mozilla Firefox
Opera
Safari
Last Updated : 29 Oct, 2021
Like Article
Save Article
: CSS Tables
What is display table in CSS?
display: table – You’ll rarely use a display value of table these days, but it’s still important to know. It was more useful in the past because you would use it for layouts before the advent of floats, Flex, and Grid. Setting display to table makes the element behave like a table.
element and also a, or any container of your choice. You make a table with the HTML
element like this:
Fruits
Lemurs
Pets
Cashew
Hua hua
Dog
Apple
Diadem Sifaka
Cat
Mango
Rig-tailed
Chicken
body div span tr, td The result of the HTML and CSS code snippets above looks like this: But you can make the same table with the element by setting the respective displays to table, table-row, and table-cell, You will get the same result as you can see below: Fruits Lemurs Pets Cashew Hua hua Dog Apple Diadem Sifaka Cat Mango Ring-tailed Chicken body div span,table,row,cell,row,,cell You still get your table:
How do you make an advanced table in HTML?
HTML table advanced features and accessibility – Learn web development | MDN
In the second article in this module, we look 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.
Prerequisites:
The basics of HTML (see ).
Objective:
To learn about more advanced HTML table features, and the accessibility of tables.
You can give your table a caption by putting it inside a element and nesting that inside the element. You should put it just below the opening
tag. table > caption > Dinosaurs in the Jurassic period As you can infer from the brief example above, the caption is meant to contain a description of the table contents. This is useful for all readers wishing to get a quick idea of whether the table is useful to them as they scan the page, but particularly for blind users. Rather than have a screen reader read out the contents of many cells just to find out what the table is about, the user can rely on a caption and then decide whether or not to read the table in greater detail. A caption is placed directly beneath the
tag. Note: The attribute can also be used on the
element to provide a description — this is also read out by screen readers. We’d recommend using the element instead, however, as summary is deprecated and can’t be read by sighted users (it doesn’t appear on the page). Let’s try this out, revisiting an example we first met in the previous article.
Open up your language teacher’s school timetable from the end of, or make a local copy of our file.
Add a suitable caption for the table.
Save your code and open it in a browser to see what it looks like.
As your tables get a bit more complex in structure, it is useful to give them more structural definition. One clear way to do this is by using,, and, which allow you to mark up a header, footer, and body section for the table. These elements don’t make the table any more accessible to screen reader users, and don’t result in any visual enhancement on their own.
They are however very useful for styling and layout — acting as useful hooks for adding CSS to your table. To give you some interesting examples, in the case of a long table you could make the table header and footer repeat on every printed page, and you could make the table body display on a single page and have the contents available by scrolling up and down.
To use them:
The
element must wrap the part of the table that is the header — this is usually the first row containing the column headings, but this is not necessarily always the case. If you are using / element, the table header should come just below those.
The element needs to wrap the part of the table that is the footer — this might be a final row with items in the previous rows summed, for example. You can include the table footer right at the bottom of the table as you’d expect, or just below the table header (the browser will still render it at the bottom of the table).
The
element needs to wrap the other parts of the table content that aren’t in the table header or footer. It will appear below the table header or sometimes footer, depending on how you decided to structure it.
Note:
is always included in every table, implicitly if you don’t specify it in your code. To check this, open up one of your previous examples that doesn’t include
and look at the HTML code in your — you will see that the browser has added this tag for you. You might wonder why you ought to bother including it at all — you should, because it gives you more control over your table structure and styling. Let’s put these new elements into action.
First of all, make a local copy of and in a new folder.
Try opening it in a browser — You’ll see that it looks OK, but it could stand to be improved. The “SUM” row that contains a summation of the spent amounts seems to be in the wrong place, and there are some details missing from the code.
Put the obvious headers row inside a
element, the “SUM” row inside a element, and the rest of the content inside a
element.
Save and refresh, and you’ll see that adding the element has caused the “SUM” row to go down to the bottom of the table.
Next, add a attribute to make the “SUM” cell span across the first four columns, so the actual number appears at the bottom of the “Cost” column.
Let’s add some simple extra styling to the table, to give you an idea of how useful these elements are for applying CSS. Inside the head of your HTML document, you’ll see an empty element. Inside this element, add the following lines of CSS code: tbody tfoot
Save and refresh, and have a look at the result. If the
and elements weren’t in place, you’d have to write much more complicated selectors/rules to apply the same styling.
Note: We don’t expect you to fully understand the CSS right now. You’ll learn more about this when you go through our CSS modules ( is a good place to start; we also have an article specifically on ). Your finished table should look something like the following: Note: You can also find it on GitHub as,
element. This is generally not really advised, as it makes the markup more confusing and less accessible to screen reader users, and in many cases you might as well just insert extra cells/rows/columns into the existing table. It is however sometimes necessary, for example if you want to import content easily from other sources. The following markup shows a simple nested table: table id = ” table1 ” > tr > th > title1 th > title2 th > title3 tr > td id = ” nested ” > table id = ” table2 ” > tr > td > cell1 td > cell2 td > cell3 td > cell2 td > cell3 tr > td > cell4 td > cell5 td > cell6 The output of which looks something like this: Let’s recap briefly on how we use data tables. A table can be a handy tool, for giving us quick access to data and allowing us to look up different values. For example, it takes only a short glance at the table below to find out how many rings were sold in Gent during August 2016. To understand its information we make visual associations between the data in this table and its column and/or row headers.
Items Sold August 2016
Clothes
Accessories
Trousers
Skirts
Dresses
Bracelets
Rings
Belgium
Antwerp
56
22
43
72
23
Gent
46
18
50
61
15
Brussels
51
27
38
69
28
The Netherlands
Amsterdam
89
34
69
85
38
Utrecht
80
12
43
36
19
But what if you cannot make those visual associations? How then can you read a table like the above? Visually impaired people often use a screen reader that reads out information on web pages to them. This is no problem when you’re reading plain text but interpreting a table can be quite a challenge for a blind person. Nevertheless, with the proper markup we can replace visual associations by programmatic ones. Note: There are around 253 Million people living with Visual Impairment according to, This section of the article provides further techniques for making tables as accessible as possible. Screen readers will identify all headers and use them to make programmatic associations between those headers and the cells they relate to. The combination of column and row headers will identify and interpret the data in each cell so that screen reader users can interpret the table similarly to how a sighted user does. We already covered headers in our previous article — see, A new topic for this article is the attribute, which can be added to the
element to tell screen readers exactly what cells the header is a header for — is it a header for the row it is in, or the column, for example? Looking back to our spending record example from earlier on, you could unambiguously define the column headers as column headers like this: thead > tr > th scope = ” col ” > Purchase th scope = ” col ” > Location th scope = ” col ” > Date th scope = ” col ” > Evaluation th scope = ” col ” > Cost (€) And each row could have a header defined like this (if we added row headers as well as column headers): tr > th scope = ” row ” > Haircut td > Hairdresser td > 12/09 td > Great idea td > 30 screen readers will recognize markup structured like this, and allow their users to read out the entire column or row at once, for example. scope has two more possible values — colgroup and rowgroup, These are used for headings that sit over the top of multiple columns or rows. If you look back at the “Items Sold August 2016” table at the start of this section of the article, you’ll see that the “Clothes” cell sits above the “Trousers”, “Skirts”, and “Dresses” cells. All of these cells should be marked up as headers (
), but “Clothes” is a heading that sits over the top and defines the other three subheadings. “Clothes” therefore should get an attribute of scope=”colgroup”, whereas the others would get an attribute of scope=”col”, An alternative to using the scope attribute is to use and attributes to create associations between headers and cells. The way they are used is as follows:
You add a unique id to each
element.
You add a headers attribute to each
element. Each headers attribute has to contain a list of the id s of all the
elements that act as a header for that cell, separated by spaces.
This gives your HTML table an explicit definition of the position of each cell in the table, defined by the header(s) for each column and row it is part of, kind of like a spreadsheet. For it to work well, the table really needs both column and row headers. Returning to our spending costs example, the previous two snippets could be rewritten like this: thead > tr > th id = ” purchase ” > Purchase th id = ” location ” > Location th id = ” date ” > Date th id = ” evaluation ” > Evaluation th id = ” cost ” > Cost (€) tbody > tr > th id = ” haircut ” > Haircut td headers = ” location haircut ” > Hairdresser td headers = ” date haircut ” > 12/09 td headers = ” evaluation haircut ” > Great idea td headers = ” cost haircut ” > 30 Note: This method creates very precise associations between headers and data cells but it uses a lot more markup and does not leave any room for errors. The scope approach is usually enough for most tables.
For this final exercise, we’d like you to first make local copies of and, in a new directory.
Now try adding in the appropriate scope attributes to make this table more appropriate.
Finally, try making another copy of the starter files, and this time make the table more accessible using id and headers attributes.
There are a few other things you could learn about tables in HTML, but this is all you need to know for now. Next, you can test yourself with our, Have fun! If you are already learning CSS and have done well on the assessment, you can move on and learn about styling HTML tables — see, If you want to get started with learning CSS, check out the !
: HTML table advanced features and accessibility – Learn web development | MDN
/table>
/table>
/table>
What is the HTML layout?
An HTML layout is a blueprint used to arrange web pages in a well-defined manner. It is easy to navigate, simple to understand and uses HTML tags to customize web design elements. Crucial for any website, an HTML layout that uses the correct format will easily improve a website’s appearance.
How to create a table in HTML and CSS?
How to Make a Table in HTML – To make a table in HTML, use the
tag. Within this table tag, you’ll place the
,
, and
tags.
The
tag defines a table row. The
tag defines the table header. By default, any text in the
tag is bold and centered. The
tag defines the table data (ie. table cells). By default, any text in the
tag is unbolded and left-aligned.
It’s important to note that the
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.
How to create HTML table with file?
HTML tables are created with the
,
,
,,
,
,
, and tags.
Start by typing
to create the shell for the table.Tables can optionally be broken into a head, body and foot, using the
,
, and tags, like this:
The table rows go within the
,
, and tags if they exist or directly within the
tag if they don’t.
How to create table in HTML using JavaScript?
First we created the
element. Next, we created the
element, which is a child of the
To add an additional row, add the highlighted
To add another column, try adding an additional table data
In order to add a column to the table, you’ll need to insert a 
Also, make sure that you add the
More information on editing tables via HTML can be found through a quick web search,
: The border-collapse property tells us whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style. Syntax: border-collapse: collapse/separate; Example 2: This example describes the CSS Table by applying the border-collapse property. 
: This property specifies the space between the borders of the adjacent cells. Syntax: border-spacing: value; Example 3: This example describes the CSS Table by applying the border-spacing property. 
: Caption side property is used for controlling the placement of caption in the table. By default, captions are placed above the table. Syntax: caption-side: top/bottom; Example 4: This example describes the CSS Table by applying the caption-side property to control the placement of the Table caption. 
: This property specifies whether or not to display borders and background on empty cells in a table. Syntax: empty-cells:show/hide; Example 5: This example describes the CSS Table by applying the empty-cell property that specifies whether to display the borders or not in the empty cells in a table. 
: The table layout property is used to set up the layout algorithm used for the table. Syntax: table-layout:auto/fixed; Example 6: This example describes the CSS Table by applying the table layout property. 
Supported Browsers: The browsers supported by Tables 
But you can make the same table with the element by setting the respective displays to table, table-row, and table-cell, You will get the same result as you can see below: Fruits Lemurs Pets Cashew Hua hua Dog Apple Diadem Sifaka Cat Mango Ring-tailed Chicken body div span,table,row,cell,row,,cell You still get your table: 
