HTML Basics
Learn HTML HTML Basics HTML Elements HTML Attributes HTML Comments HTML Colors HTML Style HTML CSS HTML Headings & Paragraphs HTML Formatting HTML Quotations HTML Links HTML Images HTML ListsHTML Intermediate
HTML Tables HTML Blocks HTML Classes & Ids HTML Iframes HTML Head HTML Layouts HTML File Paths HTML Pictures HTML Audio HTML Video HTML YoutubeHTML Advance
HTML Forms HTML Form Attributes HTML POST & GETSEO Tips & Others
SEO Tips Hosting Sites SEO Tools
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
RunAs 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
RunThe 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
RunBy default, the border is doubled and has spaces between. We can cancel this off by using the border-collapse property
border-collapse:collapse;
RunThe Border-spacing property
If you want to increase the spaces between the cells then we use the border-spacing property
RunThe 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