Tables in html
Tables in HTML:
With the help of tables in HTML, you can give the environment of the database like rows and columns in the webpage.
Generally table is defined by <table> tag.
- Here table rows are defined by <tr> tag .
- Table header is defined by <th> tag.
- Data in table is defined by <td> tag.
<th> is default in bold and centered and <td> is left- aligned and regular.
Example:
<!DOCTYPE html>
<html>
<body>
<p>Basic HTML Table</p>
<table style="width:100%">
<tr>
<th>empname</th>
<th>empLastname</th>
<th>empAge</th>
</tr>
<tr>
<td>ravi</td>
<td>kumar</td>
<td>54</td>
</tr>
<tr>
<td>smith</td>
<td>Jackson</td>
<td>44</td>
</tr>
<tr>
<td>mohan</td>
<td>singh</td>
<td>23</td>
</tr>
</table>
</body>
</html>
How to collapsed borders and add cell padding:
To collapse two borders to one border use the following codes.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<p>Basic HTML Table</p>
<table style="width:100%">
<tr>
<th>empname</th>
<th>empLastname</th>
<th>empAge</th>
</tr>
<tr>
<td>ravi</td>
<td>kumar</td>
<td>54</td>
</tr>
<tr>
<td>smith</td>
<td>Jackson</td>
<td>44</td>
</tr>
<tr>
<td>mohan</td>
<td>singh</td>
<td>23</td>
</tr>
</table>
</body>
</html>
To specify the spaces between the borders and cell content you should use cell padding.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<p>Basic HTML Table</p>
<table style="width:100%">
<tr>
<th>empname</th>
<th>empLastname</th>
<th>empAge</th>
</tr>
<tr>
<td>ravi</td>
<td>kumar</td>
<td>54</td>
</tr>
<tr>
<td>smith</td>
<td>Jackson</td>
<td>44</td>
</tr>
<tr>
<td>mohan</td>
<td>singh</td>
<td>23</td>
</tr>
</table>
</body>
</html>
To align the heading to left, you should use the CSS to fulfill this stuff.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<p>Basic HTML Table</p>
<table style="width:100%">
<tr>
<th>empname</th>
<th>empLastname</th>
<th>empAge</th>
</tr>
<tr>
<td>ravi</td>
<td>kumar</td>
<td>54</td>
</tr>
<tr>
<td>smith</td>
<td>Jackson</td>
<td>44</td>
</tr>
<tr>
<td>mohan</td>
<td>singh</td>
<td>23</td>
</tr>
</table>
</body>
</html>
To add border-spacing following CSS will be used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
th {
text-align: left;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<p>Basic HTML Table</p>
<table style="width:100%">
<tr>
<th>empname</th>
<th>empLastname</th>
<th>empAge</th>
</tr>
<tr>
<td>ravi</td>
<td>kumar</td>
<td>54</td>
</tr>
<tr>
<td>smith</td>
<td>Jackson</td>
<td>44</td>
</tr>
<tr>
<td>mohan</td>
<td>singh</td>
<td>23</td>
</tr>
</table>
</body>
</html>
Col span in HTML:
If you want to cell span i.e. more than one column or when need to combine the column then you should use col span.
Example:
<table style="width:100%">
<tr>
<th>empName</th>
<th colspan="2">mobile no</th>
</tr>
<tr>
<td>sita</td>
<td>553556577854</td>
<td>5557785655</td>
</tr>
</table>row span in HTML:
If you want to cell span i.e. more than one row or when need to combine the rows then you should use row span.
Example:
<table style="width:100%">
<tr>
<th>empName:</th>
<td>Amit</td>
</tr>
<tr>
<th rowspan="2">mobile no:</th>
<td>55323577854</td>
</tr>
<tr>
<td>5557734855</td>
</tr>
</table>