HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
HTML Table Tags
Define an HTML Table
A table in HTML consists of table cells inside rows and columns.
Example
A simple HTML table:
<!DOCTYPE html>
<html>
<head>
<title>
tables
</title>
</head>
<body>
<h3>store hours</h3>
<table border="1" style="background-color:black">
<tr align="center" style="background-color:lightblue">
<th width="100">sunday</th>
<th width="100">monday</th>
<th width="100">tuesday</th>
<th width="100">wednesday</th>
<th width="100">thursday</th>
<th width="100">friday</th>
<th width="100">suturday</th>
</tr>
<tr align="center" style="background-color:white">
<td>closed</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
</tr>
</table>
<h3>study hour</h3>
<table border="1" style="background-color:black">
<tr align="center" style="background-color:orange">
<th width="70">telugu</th>
<th width="70">hindi</th>
<th width="70">english</th>
<th width="70">maths</th>
</tr>
<tr align="center" style="background-color:white">
<td>9-10</td>
<td>10-11</td>
<td>11-12</td>
<td>12-1</td>
</tr>
</table>
</body>
</html>
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Example
<!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>Telugu</td>
<td>Hindi</td>
<td>English</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Example
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>TR elements define table rows</h2>
<table style="width:100%">
<tr>
<td>Telugu</td>
<td>Hindi</td>
<td>English</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>
Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:
th stands for table header.
Example
Let the first row be table header cells:
<!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>Subject 1</th>
<th>Subject 2</th>
<th>Subject 3</th>
</tr>
<tr>
<td>Telugu</td>
<td>Hindi</td>
<td>English</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>
No comments:
Post a Comment