September 06, 2024

HTML Tables 🧮

What is an HTML Table?


  • An HTML table is a way to display data in a structured format using rows and columns.


  • Tables are useful for organizing information like schedules, pricing, or any data that fits well into a grid.


Basic Structure of an HTML Table🗂️


Table Tags Overview:


  • <table>: The main container for a table.


  • <tr> (Table Row): Defines a row in the table.


  • <th> (Table Header): Defines a header cell in a table (usually bold and centered).


  • <td> (Table Data): Defines a standard cell in a table.


  • Example:


<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>


Creating a Simple Table🛠️


  • Step-by-Step Guide


  • Start with the <table> tag.


  • Add rows with the <tr> tag.


  • Inside each row, add header cells (<th>) or data cells (<td>)


  • Example:


<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
  </tr>
</table>


Adding Borders and Styling 🎨


  • Basic Styling with CSS


  • Borders: Use border property to add borders to the table, rows, or cells.


  • Padding and Spacing: Use padding and border-spacing to improve readability.


  • Example:



<html>
  <head>
    <title>HTML TABLE</title>
    <style>
      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th, td {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>John</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>


Spanning Rows and Columns 🔄


  • Colspan and Rowspan


  • colspan: Merges two or more columns into one cell.


  • rowspan: Merges two or more rows into one cell.


  • Example:


<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Age: 25</td>
    <td>City: New York</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td colspan="2">Age: 30, City: London</td>
  </tr>
</table>


Nested Tables 🗃️


  • What are Nested Tables?


  • Placing one table inside another to create complex layouts.


  • Example:


<table border="1">
  <tr>
    <td>
      <table border="1">
        <tr>
          <th>Inner Table Header</th>
        </tr>
        <tr>
          <td>Inner Table Data</td>
        </tr>
      </table>
    </td>
    <td>Outer Table Data</td>
  </tr>
</table>
HTML Tables
HTML Colspan and Rowspan
Grid Layouts
HTML5
Table Structure in HTML