HTML Tables: A Comprehensive Guide with Code Examples

0
11KB

HTML tables are used to structure data in a tabular format, making it easy to read and understand. They consist of rows and columns, and each cell within the table can contain text, images, or even other HTML elements.

Basic Table Structure

HTML
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

  • <table>: This tag defines the table.  
  • <tr>: This tag defines a table row.
  • <th>: This tag defines a table header cell.
  • <td>: This tag defines a table data cell.

Table Headers and Data Cells

  • Headers: Use <th> tags to create table headers. They are typically styled differently (e.g., bold, centered) to distinguish them from data cells.
  • Data Cells: Use <td> tags to create table data cells. These contain the actual content of the table.

Table Attributes

  • border: Sets the width of the table border.
  • cellspacing: Sets the space between cells.
  • cellpadding: Sets the space between the cell content and the cell border.
  • width: Sets the width of the table.
  • height: Sets the height of the table.

Example with Attributes

HTML
<table border="1" cellspacing="0" cellpadding="5
  

Table Captions and Summary

  • <caption>: Adds a caption to the table.
  • summary: Provides a brief summary of the table's content, which is helpful for screen readers and search engines.

Example with Caption and Summary

HTML
<table>
  <caption>Sales Data for Q3</caption>
  <summary>This table shows the sales figures for each product line during the third quarter.</summary>
  </table>

Colspan and Rowspan

  • colspan: Specifies the number of columns a cell should span.
  • rowspan: Specifies the number of rows a cell should span.

Example with Colspan and Rowspan

HTML
<table>
  <tr>
    <th>Product</th>
    <th colspan="2">Sales</th>
    <th>Profit</th>
  </tr>
  <tr>
    <td>Product A</td>
    <td>100</td>
    <td>2000</td>
    <td>500</td>
  </tr>
  <tr>
    <td>Product B</td>
    <td rowspan="2">150</td>
    <td>3000</td>
    <td>700</td>
  </tr>
  <tr>
    <td>Product C</td>
    <td>2500</td>
    <td>800</td>
  </tr>
</table>

By understanding these concepts and using the provided code examples, you can effectively create and customize HTML tables to present your data in a clear and organized manner.

Like
1
Rechercher
Catégories
Lire la suite
Physics
S.4 PHYSICS RESOURCEFUL QUESTIONS
S.4 PHYSICS RESOURCEFUL QUESTIONS
Par Question Bank 2024-08-30 19:56:05 0 13KB
Computer Programming
Dynamic Typing, Stubs, and Namespaces
Dynamic Typing: In Python, variables don't have a pre-defined data type associated with...
Autre
Israeli Defense Minister Cancels Visit with Pentagon Chief Amid Rising Tensions
Tel Aviv, October 9, 2024 – In a significant development, Israeli Defense Minister...
Par Updates & History 2024-10-09 17:53:53 0 13KB
Physics
SEPTA-O-LEVEL PHYSICS SEMINAR SLATED FOR 23RD JUNE 2024 AT ST. JOSEPH OF NAZARETH HIGH SCHOOL KAVULE-KATENDE
https://acrobat.adobe.com/id/urn:aaid:sc:EU:39c1aa82-237a-43bf-ba1a-fbe5223d26f1
Par Question Bank 2024-07-14 19:52:41 2 13KB
Éducation
PROJECT PLANNING
PROJECT PLANNING
Par Landus Mumbere Expedito 2024-07-26 16:25:50 0 8KB
Tebtalks https://tebtalks.com