Tables
HTML tables are used to display data in a tabular format. Tables are created using the <table> element, which contains one or more rows (<tr>), which in turn contain one or more cells (<td>). The content of each cell can be text, images, links, or other HTML elements.
Here is an example of a basic HTML table with two rows and two columns:
<table> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>
This will create a table that looks like this:
| Row 1, Column 1 | Row 1, Column 2 |
|---|---|
| Row 2, Column 1 | Row 2, Column 2 |
You can use the <th> element instead of <td> to define header cells in the first row of the table. Additionally, you can use the colspan and rowspan attributes to merge cells horizontally or vertically.
Here is an example of a more complex HTML table:
<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$150</td> </tr> <tr> <td colspan="2">Total savings: $250</td> </tr> </table>
This will create a table that looks like this:
| Month | Savings |
|---|---|
| January | $100 |
| February | $150 |
| Total savings: $250 |
Note that the last row in this example uses the colspan attribute to span both columns.
Tables (tbody - thead - tfoot)
In HTML, a table is an element used to display data in a tabular format. It is made up of rows and columns, with data usually placed in cells at the intersection of a row and a column.
To create a table, you need to use the HTML <table> element. The contents of the table are placed within the opening and closing tags of the <table> element. Each row of the table is defined using the <tr> element, while each cell within a row is defined using the <td> element.
Here's an example of a basic table in HTML:
<table> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>
This will create a simple table with two rows and two columns, with the text "Row 1, Column 1" in the top left cell, "Row 1, Column 2" in the top right cell, "Row 2, Column 1" in the bottom left cell, and "Row 2, Column 2" in the bottom right cell.
To add a table header, you can use the <th> element instead of the <td> element. The <th> element is used to define a header cell in a table.
<table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>25</td> <td>USA</td> </tr> <tr> <td>Emily</td> <td>30</td> <td>Canada</td> </tr> </tbody> </table>
In this example, the <thead> element is used to define the table header, which contains three header cells with the text "Name", "Age", and "Country". The table body is defined using the <tbody> element, which contains two rows of data.
To add a footer to the table, you can use the <tfoot> element. This element should be placed after the <tbody> element and before the closing </table> tag.
<tfoot> element is used to define the table footer, which contains one row with one cell that spans all three columns. The colspan attribute is used to indicate that the cell should span three columns. The text "Total: 2 people" is displayed in the cell.clospan
The colspan attribute in HTML table is used to merge two or more columns into a single column. It is useful when we need to create table cells that span more than one column.
The colspan attribute is used on the <td> or <th> tag, and it takes an integer value that represents the number of columns that the cell should span.
Here's an example:
<table> <tr> <th>First Name</th> <th>Last Name</th> <th colspan="2">Contact Details</th> </tr> <tr> <td>John</td> <td>Doe</td> <td>Email</td> <td>Phone</td> </tr> <tr> <td>Jane</td> <td>Smith</td> <td>Email</td> <td>Phone</td> </tr> </table>
In the above example, we have a table with four columns: "First Name", "Last Name", "Email", and "Phone". However, we want to merge the "Email" and "Phone" columns into a single column called "Contact Details". To do this, we use the colspan attribute with a value of "2" on the "Contact Details" cell.
The resulting table will have three columns: "First Name", "Last Name", and "Contact Details". The "Contact Details" column will span two columns and contain both the "Email" and "Phone" information.
rowspan
The rowspan attribute in HTML table is used to merge two or more rows into a single row. It is useful when we need to create table cells that span more than one row.
The rowspan attribute is used on the <td> or <th> tag, and it takes an integer value that represents the number of rows that the cell should span.
Here's an example:
<table> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> <tr> <td rowspan="2">John</td> <td>25</td> <td>New York</td> </tr> <tr> <td>30</td> <td>Los Angeles</td> </tr> <tr> <td>Jane</td> <td>27</td> <td>San Francisco</td> </tr> </table>
In the above example, we have a table with three columns: "Name", "Age", and "City". However, we want to merge the rows for John, so that his name appears only once but his age and city appear in the same row as his name. To do this, we use the rowspan attribute with a value of "2" on the "John" cell.
The resulting table will have three rows and three columns. The first row will contain the column headers, the second row will have the merged cells for John, and the third row will have the cell values for Jane.
Colgroup / Col
The colgroup and col tags are used to define column groups and properties in an HTML table.
The colgroup tag is used to group columns in a table. It is typically used to apply styles or formatting to multiple columns at once. The colgroup tag is placed inside the table tag, before the thead, tbody, and tfoot tags.
Example:
<table> <colgroup> <col style="background-color: yellow;"> <col span="2" style="background-color: lightblue;"> </colgroup> <thead> <tr> <th>Month</th> <th>Savings</th> <th>Expenses</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> <td>$50</td> <td>$50</td> </tr> <tr> <td>February</td> <td>$80</td> <td>$70</td> <td>$10</td> </tr> </tbody> </table>
In this example, the colgroup tag is used to define two groups of columns. The first group has one column, which has a yellow background color. The second group has two columns, both of which have a light blue background color. The colgroup tag is followed by the thead and tbody tags, which contain the table header and body, respectively.
The col tag is used to apply properties to individual columns in a table. It is placed inside the colgroup tag and can have attributes such as span, width, and style.
Example:
<table> <colgroup> <col style="background-color: yellow;"> <col span="2" style="background-color: lightblue;"> </colgroup> <thead> <tr> <th>Month</th> <th>Savings</th> <th>Expenses</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> <td>$50</td> <td>$50</td> </tr> <tr> <td>February</td> <td>$80</td> <td>$70</td> <td>$10</td> </tr> </tbody> </table>
col tag is used to apply a yellow background color to the first column. The second col tag has a span attribute of 2, which means it applies to the next two columns. These columns have a light blue background color.
Comments
Post a Comment