- Creating, Modifying and Styling HTML Tables
- Contents
- A Basic HTML Table Example
- Defining Table Structure with HTML Tags
- Table Head, Body and Footer
- Merging Cells with Attributes
- Styling HTML Tables
- Using CSS Properties
- HTML Table: Summary
- A step-by-step guide to getting started with HTML tables
- Basic Table
- Table Header Element
- Table Head & Body
- Table Foot Element
- Caption Element
- HTML Table
- Table tag in HTML
- Table Row in HTML
- Table Heading, in HTML
- Table Cell in HTML
- Table Border
- Table Head, Body, and Footer
- Example: HTML Table Head, Body, and Footer
- Colspan and Rowspan
- Colspan
- Rowspan
- Things to know about HTML Table
Creating, Modifying and Styling HTML Tables
TL;DR – HTML table contains tabular data in multiple rows and columns.
Contents
A Basic HTML Table Example
table> tr> th>Name th> th>Surname th> th>Points th> tr> tr> td>Kayle td> td>Jax td> td>42 td> tr> tr> td>Eve td> td>Cho td> td>14 td> tr> table>HTML tables are meant to hold tabular data only: don’t use them to modify the layout of the page.
Defining Table Structure with HTML Tags
table> tr> td>This is the first row in the first column td> td>This is the first row in second column td> tr> tr> td>This is the second row in the first column td> td>This is the second row in the second column td> tr> table>table> tr> th>Fruits th> th>Prices th> tr> tr> td>Apple td> td>$1.26 td> tr> tr> td>Banana td> td>$0.60 td> tr> table>table style="width: 100%; border: 1px solid;"> caption>Average Price List of Fruits [July 2017] caption> tr> th>Fruits th> th>Prices th> tr> tr> td>Apple td> td>€0.60 td> tr> tr> td>Banana td> td>€0.32 td> tr> table>Note: should be included right after the opening tag before any other content.
Table Head, Body and Footer
table border> thead> tr> td>Purchase td> td>Price td> tr> thead> table>table> tbody> tr> td>Long Island td> td>45 td> td>50 td> tr> tr> td>Geeky stuff td> td>85 td> td>90 td> tr> tr> td>StayAtHomeMart td> td>25 td> td>30 td> tr> tr> td>BestBuy td> td>60 td> td>10 td> tr> tbody> table>tfoot> tr> td>Summary td> td>It was mostly sunny. td> tr> tfoot>- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
Merging Cells with Attributes
In some cases, you might need to merge cells in your HTML table. This can be achieved using special attributes.
The colspan attribute merges multiple cells in one row to create one:
table> tr> th colspan="2">List of Fruit Prices th> tr> tr> td>Apple td> td>€0.60 td> tr> tr> td>Banana td> td>€0.32 td> tr> table>The rowspan attribute acts in the same manner, but instead of merging cells in one table row, it spans through a column downwards:
table> tr> th>Fruits th> th>Prices th> th rowspan="3">Month of June 2017 th> tr> tr> td>Apple td> td>€0.6 td> tr> tr> td>Banana td> td>€0.32 td> tr> table>Styling HTML Tables
If you wish to style one or multiple columns in a different manner than the whole HTML table, you need to be familiar with and elements. Using them allows you to assign specific inline styling for particular columns:
table> colgroup> col span="1" style="background-color: cornsilk;"> col style="background-color: bisque;"> colgroup> tr> th>Price th> th>Item th> th>Quantity th> tr> tr> td>100 td> td>Peanut Butter td> td>2 td> tr> table> Using CSS Properties
You can also create a custom table look using CSS internal styling. In this section, we will review the most common properties.
The border property creates an HTML table border:
In the example above, the border is doubled. This happens because the property adds a separate border to every cell of the table. However, you can use the border-collapse property to merge the double border into a single line:
You can also keep the double border and style it. The border-spacing property allows you to modify the spacing between the borders of separate cells in your HTML table:
By default, HTML tables do not have any styling to them. If you want to create spacing between your data, you can set it while using the padding property which is usually defined in pixels:
You can align the text in your HTML table by using the text-align property. You can set the alignment to the left, right or center:
Note: header cells already have a center alignment, and body cells are aligned to left by default.
HTML Table: Summary
- HTML table width depends on its content. It’s a block-level element, but won’t span through the whole page width automatically if the content takes up less space.
- Keep in mind that screen readers for disabled users announce the presence of HTML tables and read them from left to right and from top to bottom.
- Notice that is an empty element, but is not, as it contains all the elements.
A step-by-step guide to getting started with HTML tables
The web is filled with information like football scores, cricket scores, lists of employee names and email addresses. HTML tables enable you to display information in what is commonly known as tabular data.
NOTE: I have already added the Styling using CSS, so my elements will look different. But they will work in exactly the same way.
If you want to make your elements look like mine then, you can find my CSS file in the links given below:
CSS: https://gist.github.com/abhishekjakhar/2ea51dfc0dcf6f6ed0d44ac0e72f9c54
Basic Table
We can create an HTML table using the table element. It has an opening and closing tag, and it wraps all the table rows and table cells inside of it.
Now, let’s type a table row. Tables are made up of rows of information that go across the page. A tr> element is used to create a table row.
- >: The table element represents data in a series of rows and columns. Tables should only be used for displaying tabular data, and never for page layout.
- >: The table row element defines a row of cells in a table. Table rows can be filled with table cells and table header cells.
- >: The table cell element contains data and represents a single table cell. Each table cell should be inside a table row.
Table Header Element
We’ve created a basic table, but it’s not clear that our first row in the table is actually an attempt to label each of our columns. Right now, the first row simply looks like another row in our table.
We can use a table header element on each of these three columns to tell the browser, search engine crawlers, and screen readers that these are actually headers and not just regular data.
Now we will be changing table cells in the first row to a table headers cell. To do that we will replace td> by .
Table Head & Body
Similar to the structure of our HTML document, where we have a head and a body, we can also add a head and a body to our table. We will definitely not use the same HTML elements because then the syntax will become invalid. For the table, we have ad> for the head and <tbody> for the body.
- ad> — The table head element (not to be confused with the table header cell element) defines a set of rows that make up the header of a table.
- dy> — The table body element defines one or more rows that make up the primary contents (or “body”) of a table.
Table Foot Element
We have a table head and a table body element. So of course, there’s a table foot element as well. But the question is what is the point of table footer element when we already have the table headers that label columns?
In general, a table footer element should contain a summary of the table. This might be some final cells containing sums, totals and averages for each column. It might also contain some meta information like copyright information or the source of data within a table.
Now, you would think that the table footer would go at the bottom of the table. However, it actually should go right after the table head element and just before the table body element.
- gt; — The table footer element defines a set of rows summarizing the columns of the table.
Caption Element
This element is basically a title for the table, and it should come immediately after the opening table tag. This is nice to add because it quickly summarizes what a table might contain.
Now we have covered the essentials of table elements in HTML.
You can learn more about the tables in the links given below.
I hope you’ve found this post informative and helpful. I would love to hear your feedback!
Thank you for reading!
HTML Table
In the above example, you can see we have used multiple tags to create a table in HTML.
Table tag in HTML
Table Row in HTML
Name Country Prasanna Nepal Simon USA In a table, there can be any number of rows.
Table Heading, in HTML
The tag is used to define a table header. It is generally the top row of the table. For example,
Item Count Mango 125 Orange 75
Browser Output
In the above example, Item and Count are table headers and they are used to represent the category of data in a particular row.
Here, the styling of the table headers is bold and center-aligned. This is because the tag has some default styling.
Table Cell in HTML
In the above example,
,
and
are table cells.
Table cells are generally inside the table row or table headers.
Table Border
Remember we have used the border attribute in our first example.
In HTML, the border attribute is used to add a border to a table and all the cells.
Note: We can have borders of various styles in tables, however for more specific borders, we need to use CSS.
To prevent double borders like the one in the example above, we can set the border-collapse property of the table. For example,
Table Head, Body, and Footer
The HTML table can be divided into three parts: a header, a body, and a footer.
1. Table Header
We use the tag to add a table head. The tag must come before any other tags inside a table. For example,
The content of is placed on the top part of the table and we usually place the rows with table headers inside the tag.
2. Table Body
We use the tag to add a table body. The tag must come after and before any other tags inside a table. For example,
The content of is placed on the center part of the table and we usually place the rows with the content we want to represent in the .
3. Table Footer
We use the tag to add a table footer. The tag must come after and before any other tags inside a table. For example,
The content of is placed on the bottom part of the table and we usually place the rows with the footer in the .
Example: HTML Table Head, Body, and Footer
S.N Item Quantity 1 Apple 2 2 Mango 2 3 Orange 1 Total 5
Browser Output
Colspan and Rowspan
Colspan
The colspan attribute merges cells across multiple columns. For example,
S.N Item Quantity 1 Apple 2 2 Mango 2 3 Orange 1 Total 5
Browser Output
In the above example, you can see that the last row only has 2 cells with one cell occupying 2 columns.
The value of the colspan attribute determines how many columns the cell occupies.
Rowspan
The rowspan attribute merges cells across multiple rows. For example,
Name Subject Marks Mark Smith English 67 Maths 82 Science 91
Browser Output
In the above example, you can see that the first column only has 2 cells with one cell occupying 2 rows.
The value of the rowspan attribute determines how many rows the cell occupies.
Things to know about HTML Table
Yes, we can use both colspan and rowspan to create cells that occupy multiple rows and columns. Here is an example:
In this tutorial we have seen table headers, , used in the top row multiple times. But we can also add the tags across columns to create a vertical header. For example,
Name Sam Steve Peggy Age 31 42 29 Gender M M F
Browser Output
