Night More

Revise Now

Cambridge AS levels

Physics Chemistry Computer Science

Programming and coding

Learn HTML Learn SEO


What do you want
to do?

Contact us Donate Support More Services Send a tweet Social media

more topic chapters

HTML Table Tags

Tables are used to store data in a structured and organised way

You can easily make tables using HTML coding. Also Tables make your website your organised and much more better looking.

Here is an example of a simple table

Type Speed in terms of c KE
Alpha radiation 5%c More than β
Beta radiation 99%c Range of KE as due to range of speeds
Gamma radiation c High - depends on the frequency- usually a specific value. Where as beta always changes.

As you can see i have made a table to structure and arrange related data in columns and each row is a different item or object which in this case is the type of radiation

Tables can be style very easily using CSS

We learn the simple syntax to create a simple HTML table

Befor that just remember this elements/tags which are included in the formation of the table

Trust me it looks difficult but it is very simple

<table> is the element which is used to create the overall outline and structure of the table

<tr> is the element which is used to create a single row. Every <tr> tag is used to hold a single row - tr stands for table row

<th> is the element which is used to hold heading data for each cell or block of the table This is usually defined for the first row

<td> is the element which is used to hold data for each cell or block of the table This is usually defined for the rest of the rows.

Let's see the same example in the code form. Remember the above table is designed using CSS styling


As you can see the table may not have an outline or border. In most browsers, the default border or outline for tables is none. We need to style it using CSS to get the border. Most websites states a border is formed but this is outdated. This is because tables are very old tags which only give the structure of the table data.

<caption> element & tag

If you want to add a small heading or title to a html table you could use the <caption element

But there is a rule which you must follow the <caption> element must come just after the <table> tag or else it wouldn't work

Let's see another example


The only change made to it is the addition of a caption tag. This creates a small heading for the table

How to add a border to a HTML table

To add a html border or outline to the table, we need to use CSS styling or the style attribute

We use the border property and define the property for the <table> and <th> and<td> tags

This should be under the style tag under head or under a CSS file

table,th,td {
border:solid 1px black;

Don't worry if you don't understand. This is a CSS topic we will talk about this fully under the CSS section

Let us see an example


By default, the border is doubled and has spaces between. We can cancel this off by using the border-collapse property



The Border-spacing property

If you want to increase the spaces between the cells then we use the border-spacing property


The border-spacing property must be defined for the table because it is the same for all the cells in the table. Also remember this point.

The border-spacing property will not work if the border-collapse property is set to collapse

Power a of CSS styling

With CSS anything looks beautiful. Don't worry you will master CSS using our CSS resource and examples. It's that easy!

We won't talk much about styling because this is not the CSS styling chapter

However, will state what are somethings which CSS styling can do to a table

Align the text to center with in cells

Change the background color of the table

Change the size of the table

Change the font of the text within the table

Color individual cells

Change the color of cells or rows or table when a mouse is over it

Revisezone.com Copyright 2020 Developers & Coding section