Welcome to the html tutorial, and we already covered html table syntax. Today we will talk about the html table properties, here we will see how you can create a table with different looks using the attributes. In short html table properties will let you decorate your table, and we will try to cover properties with one or two examples.
Html table properties – list
<align> ( left, center and right) It will help you to place table left, right or in thecenter. <border> It will help you to shape thickness of the border. <bordercolor> It will help you to set the color of the border. <background> Can set image of the table background. <bgcolor> Use for the background color of the table. <caption> It will define a table caption <cell padding> distance between the cell and content <cell spacing> space between the cells <colspan> It will specify the number of columns a cell should span. <frame> ( void, above, below, lhs, rhs, Hsides, vsides, box) Remove or show border at the top, below, left, right,horizontal, vertical and all sides of the table. <nowrap> no line breaks in text objects. <table> help you to define a table. <tr> Defines a row in a table <td> Defines a cell in a table <th> Defines a header cell in a table. <thead> It will group the header contentin a table <tbody> It will group the body content in a table <tfoot> It will group the footer content in a table. <rowspan> It will set the number of rows a cell should span. <valign>( top or bottom) can align the content to the top or the bottom of thecell. <width> Can set the width of the table from minimum to maximum.
Note: we have listed down the most used properties of the table, in case you wish to see the complete list, then w3.org have it.
Points to remember
- The align attribute is not supported in html5.
- Avoid using bgcolor and border in HTML5
- Cellpading and cell spacing will not work in html5
- Frame tag is not supported in HTML5.
- You can use a caption tab, but only after the <table> tag, and one caption per table is allowed.
- The nowrap can be used till 4.01.
- If you are using <thead>,<tbody> or <tfoot>, then make sure it has one or more <tr> tag.
- You can’t use valign in HTML5.
- The width attribute is also not supported in HTML5
Note: It’s true you can’t use some of the html table properties in HTML5, but who stopped you to use it in html 4.01 or lower. The idea is “ You should know the basics, but with the sound knowledge”.
Example – Use of the table’s property.
We already saw some of the common html table properties, now we will use some of our examples to understand the use of the properties.
<html>
<head>
<style>
table,th,td {
border: 1px solid brown;
}
th,td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%" bgcolor="aliceblue">
<caption>Learning Table properties</caption>
<tr>
<td>Table tag - Used</td>
<td>Caption tag - used</td>
</tr>
<tr>
<td>rows(tr) - used</td>
<td>column(td) - used</td>
</tr>
<tr>
<td>bgcolor attribute - used</td>
<td>width - used</td>
</tr>
</table>
</body>
</html>
Output for the above code will be:
You can clearly see what we have used in example, is listed in the table itself. Trust me Html is a very cool thing to learn, just enjoy your creativity.
Note: We just used the style tag to make our results presentable, never forget that some of the attributes are not applicable in HTML5, instead you can use CSS.
Conclusion
We have covered the html table properties, which html version supports it and the example to clear what’s so ever doubt in the mind. Just practice it, practice will give you the perfection.