Tips (Total 5)
# Tips-1) What is HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
Example of HTML Table
HTML Table works as a display your content and information. It is Started with <table> and end with </table>
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>
</body>
</html>
Output should be:
# Tips-2) How to create an HTML Table
A table in HTML consists of table cells inside rows and columns.
Full Example of HTML Table
A simple HTML table:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>A basic HTML table</h2>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=1>
<TBODY>
<TR>
<TD> Name</TD>
<TD> Address</TD></TR>
<TR>
<TD> Itupto</TD>
<TD> Sri Lanka</TD></TR></TBODY></TABLE>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
Output should be:
# Tips-3) How to create HTML Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Example of HTML Table Cells
Everything between <td> and </td> are the content of the table cell.
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Full Example of HTML Table Cells
Everything between <td> and </td> are the content of the table cell.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>TD elements define table cells</h2>
<table style="width:100%">
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
Output should be:
# Tips-4) How to create HTML Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
Example of HTML Table Rows
tr stands for table row.
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Full Example of HTML Table Rows
tr stands for table row.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>TR elements define table rows</h2>
<table style="width:100%">
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
Output should be:
# Tips-5) How to create HTML Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:
Example of Table Headers
th stands for table header.
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Full Example of Table Headers
Let the first row be table header cells: By default, the text in <th> elements are bold and centered, but you can change that with CSS.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>TH elements define table headers</h2>
<table style="width:100%">
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
Output should be:
