Table
- Table tags are used to represent data in an organized manner.
- It contains rows and columns to represent data and each single unit containing data is called the cell of the table.
- It contains three tags within it: <tr>,<th> & <td> for rows, heads and cells
- <th> for column header,<td> for table data and <tr> for table rows.
Example:
| Student Name | Marks |
|---|---|
| Prince | 56 |
| Rahul | 59 |
Syntax:
<table>
<tr>
<th>column1</th>
<th>column2</th>
</tr>
<tr>
<td>row1</td>
<td>row2</td>
</tr>
</table>Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tables</title>
</head>
<body>
<table>
<tr>
<th>Name </th>
<th>City</th>
</tr>
<tr>
<td>Prince</td>
<td>Patna</td>
</tr>
<tr>
<td>Rahul</td>
<td>Delhi</td>
</tr>
<tr>
<td>Ravi</td>
<td>Banglore</td>
</tr>
</table>
</body>
</html>Output:
Table Rows
- As the name suggests it represents the rows in Table which is defined by <tr> and </tr> tags
- The table rows are written between <tr> and </tr> tags.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
<style>
table,
td,
tr {
border: 2px solid;
}
</style>
</head>
<body>
<table>
<tr>
<td>Row1,Cell1</td>
<td>Row1,Cell2</td>
<td>Row1,Cell3</td>
</tr>
<tr>
<td>Row2,Cell1</td>
<td>Row2,Cell2</td>
<td>Row2,Cell3</td>
</tr>
</table>
</body>
</html>Output:
Table Cells
- The table cell is defined by <td> and </td> tags.
- It contains table cells.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
<style>
table,
td,
tr {
border: 2px solid;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell1</td>
<td>Cell2</td>
<td>Cell3</td>
</tr>
</table>
</body>
</html>Output:
Table Headers
- The table headers are defined by <th> and </th> tags.
- It is used when we want to define our cells as headings or head cells.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
<style>
table,
td,
tr {
border: 2px solid;
}
</style>
</head>
<body>
<table>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
</tr>
<tr>
<td>Row1,Cell1</td>
<td>Row1,Cell2</td>
<td>Row1,Cell3</td>
</tr>
<tr>
<td>Row2,Cell1</td>
<td>Row2,Cell2</td>
<td>Row2,Cell3</td>
</tr>
</table>
</body>
</html>Output:
| Tag | Description |
|---|---|
| <table> | used for a table |
| <th> | used for a header cell in a table |
| <tr> | used for a row in a table |
| <td> | used for a cell in a table |
| <caption> | used for a table caption |
| <colgroup> | used for a group of one or more columns in a table for formatting |
| <col> | used for column properties for each column within a <colgroup> element |
| <thead> | used for the header content in a table |
| <tbody> | used for the body content in a table |
| <tfoot> | used for the footer content in a table |