HTML Tables: In this instructional exercise, we will find out about the tables in HTML, with their traits.
A table is a lot of lines and sections, which could be made on a page in HTML, by tag. The unthinkable portrayal of complex information makes it lucid.
The <table> tag whenever followed by another tag <th> which indicates the table heading, the <tr> label characterizes the table column and the <td> label holds the table information
The underneath code is an example code to make a table in HTML.
<html>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Shivang</td>
<td>21</td>
<td>Indore</td>
</tr>
<tr>
<td>Amit</td>
<td>22</td>
<td>Gwalior</td>
</tr>
</table>
</body>
</html>Output:
Furthermore, a table name could be allocated to the table by the <caption> component. The <caption> tag is to be embedded following the <table> tag. Despite the fact that the utilization of the subtitle component is totally discretionary for the table.
<html>
<body>
<table border>
<caption>Student Record</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Shivang</td>
<td>21</td>
<td>Indore</td>
</tr>
<tr>
<td>Amit</td>
<td>22</td>
<td>Gwalior</td>
</tr>
</table>
</body>
</html>
The <table> tag has properties which can change the table portrayal. The outskirt of the table, the arrangement of the substance of information in the table is some of them.
Basic characteristics of <table> tag
adjust: The adjust quality determines the arrangement of the table. The values which could be given to the adjust quality are left, right or focus.
<table align="right">fringe/border: By default, the <table> tag applies no outskirt to the table. Along these lines, the outskirt ascribe is utilized to indicate the width of the table fringe. This width could be given in either pixel or rate.
<table border="10px">bordercolor: This credit is utilized to give shading to the fringe. The name or the hex code of the shading is given to this ascribe to apply shading to the outskirt.
<table bordercolor="#0000ff">width: The width characteristic indicates the table width. The value of this credit is like the fringe as could be given in pixels or rate structure.
<table width="100%">bgcolor: This credit is utilized to apply shading to the table. The name of the shading or the hex-code is to be referenced to this property. A hex-code of the shading is the shading code which is characterized by the blend in the RGB framework.
<table bgcolor="#000066">An example with attributes:
<html>
<body>
<table border="2px" width="80%" bordercolor="#006969" bgcolor="yellow" align="center">
<caption>Student Record</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Shivang</td>
<td>21</td>
<td>Indore</td>
</tr>
<tr>
<td>Amit</td>
<td>22</td>
<td>Gwalior</td>
</tr>
</table>
</body>
</html>
The CSS documents likewise could be utilized for styling the table and adding more plan and designs to the table and giving the responsiveness to the table at the same time.
Some regularly utilized CSS properties of a table are,
- border
- border-collapse
- padding
- text-align
Example of a table with CSS
<html>
<body>
<style>
table {
border: solid 2px black;
border-collapse: collapse;
padding: 10px;
text-align : center;
}
</style>
<table width="80%" bordercolor="#006969" bgcolor="yellow">
<caption>Student Record</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Shivang</td>
<td>21</td>
<td>Indore</td>
</tr>
<tr>
<td>Amit</td>
<td>22</td>
<td>Gwalior</td>
</tr>
</table>
</body>
</html>