The <table> element in HTML is used to create a table that organizes data into rows and columns. A table consists of multiple elements, some are given below.
1. <table>: The container for the table.
2. <tr> (table row): Defines a row in the table.
3. <th> (table header): Defines a header cell, which is usually bold and centered. It represents column headings.
4. <td> (table data): Defines the regular data cells in the table.
5. <caption>: Provides a title or description for the table.
Optionally, you can group rows into sections using <thead>, <tbody>, and <tfoot> for more complex tables.
basic-table.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Table Example</title> </head> <body> <h1>HTML Table Example</h1> <table border="1"> <caption>Student Grades</caption> <thead> <tr> <th>Student Name</th> <th>Subject</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>Rama Krishna</td> <td>Math</td> <td>A</td> </tr> <tr> <td>Sailaja</td> <td>Computer Science</td> <td>B+</td> </tr> <tr> <td>Nagarjuna</td> <td>History</td> <td>A+</td> </tr> </tbody> </table> </body> </html>
Explanation
1. <table border="1">: Creates the table with borders. You can adjust the border size or remove it if not needed.
2. <caption>: Provides a title for the table, "Student Grades."
3. <thead>: Contains the table's header row (Student Name, Subject, Grade).
4. <tbody>: Holds the main data, organized in rows with <tr>. Each row contains <td> elements for individual data cells (e.g., "Rama Krishna", "Math", "A").
No comments:
Post a Comment