Be able to create a table with a specified number of rows and columns

Resources | Subject Notes | Information Communication Technology ICT

Layout

Creating Tables

This section focuses on creating tables within documents. Tables are essential for organizing data in a clear and structured manner. You will learn how to specify the number of rows and columns to create a table.

Creating a Table with Specified Rows and Columns

To create a table with a specific number of rows and columns, you will use the

element along with the , , , and
elements.

Here's a breakdown of the elements:

  • : Defines the table itself.
    • : Defines the table header row(s).
    • : Defines the table body, containing the main data.
    • : Defines a table row.
    • ).
    • ).

    Example: Creating a Table with 3 Rows and 4 Columns

    The following code demonstrates how to create a table with 3 rows and 4 columns:

    <table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4>
    </tr>
    <tr>
      <td>Data 5</td>
      <td>Data 6</td>
      <td>Data 7</td>
      <td>Data 8>
    </tr>
    <tr>
      <td>Data 9</td>
      <td>Data 10</td>
      <td>Data 11</td>
      <td>Data 12>
    </tr>
  </tbody>
</table>

    Output Table

    The above code will produce the following table:

    : Defines a table header cell (used within
    : Defines a table data cell (used within
    Header 1 Header 2 Header 3 Header 4
    Data 1 Data 2 Data 3 Data 4
    Data 5 Data 6 Data 7 Data 8
    Data 9 Data 10 Data 11 Data 12

    Specifying Rows and Columns

    You can specify the number of rows and columns using the rows and cols attributes within the

    element. For example:

    <table rows="3" cols="4">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4>
    </tr>
    <tr>
      <td>Data 5</td>
      <td>Data 6</td>
      <td>Data 7</td>
      <td>Data 8>
    </tr>
    <tr>
      <td>Data 9</td>
      <td>Data 10</td>
      <td>Data 11</td>
      <td>Data 12>
    </tr>
  </tbody>
</table>

    This code will create a table with 3 rows and 4 columns.

    Important Considerations

    Remember to use appropriate content within the

    and elements to represent headers and data respectively. Ensure the structure of the table is logical and easy to understand.

    Further Exploration

    You can further customize tables using CSS to control their appearance. This is covered in a later section.