MAQ Learning

HTML Tables

HTML tables are used to display data in a structured grid-like format with rows and columns. Examples of tables include schedules, financial reports, sports results, data sheets and matrix.

Each block in the table is known as table cell. The HTML Tables are constructed using the <table>, <tr> (table row), <td> (table data/cell), and <th> (table heading) elements.

In this tutorial, you will learn:

Basic Table Structure

Let's start building a basic table structure. In the following example, you will learn how to create a 2x2 table with two rows and two columns.

Step 1:  <table> Element

The <table> element is the container that holds the entire table structure.

<table>

</table>

Step 2:   <tr> (Table Row) Element

Within the <table> element, you create rows using the <tr> (table row) element. Each row can contain one or more cells.

<table>
  <tr>    </tr>
  <tr>    </tr>
</table>

 Step 3: <td> (Table Data) Element

The individual cells within a table are represented by the <td> (table data) element. These cells contain the actual content or data.

<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 code creates a 2x2 table with two rows and two columns.

The table structure created by this HTML code is as follows:

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

Adding Headings to Tables

The <th> element in HTML is used to define table header cells within an HTML table. It represents headers for either columns or rows in a table, providing a way to label or describe the content within those columns or rows. <th> elements are typically rendered in bold by default.

Here are some key points about the <th> element:

  1. Defining Headers: <th> is used within the <thead> (Table Head), <tbody> (Table Body), <tfoot> (Table Footer), or directly inside <tr> (Table Row) elements to define headers for a table.
  2. Scope: The scope attribute helps define whether a <th> element represents column headers ("col") or row headers ("row"). This attribute is particularly useful for accessibility purposes.
  3. Common Attributes:
    • scope="row": Indicates the header cell applies to a row.
    • scope="col": Indicates the header cell applies to a column.

Following are some of the Table Headings Examples:

Simple Column Headers:

In the following example, you will learn how to create table headers <th> directly inside <tr> (Table Row) elements.

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

Explanation:

  • <table>: This tag defines the start of a table.
  • <tr>: Stands for "table row." Within the table, it creates a row to hold cells.
  • <th>: Represents a table header cell. In this case, two <th> elements are used inside the first <tr> to create header cells for the columns.
    • <th>Column 1 Header</th>: This creates the first header cell with the text "Column 1 Header."
    • <th>Column 2 Header</th>: This creates the second header cell with the text "Column 2 Header."
  • <td>: Represents a standard table data cell. The second <tr> contains two <td> elements representing the data cells for the respective columns.
    • <td>Data 1</td>: This cell contains the text "Data 1," representing the content for the first column.
    • <td>Data 2</td>: This cell contains the text "Data 2," representing the content for the second column.

The table structure created by this HTML code is as follows:

Column 1 Header Column 2 Header
Data 1 Data 2
  • The top row consists of <th> elements, indicating column headers.
  • The second row contains <td> elements, representing data cells.
  • The headers serve to label the respective columns, while the data cells hold the specific content for each column.

Row Headers:

<table>
  <tr>
    <th scope="row">Row 1 Header</th>
    <td>Data 1</td>
  </tr>
  <tr>
    <th scope="row">Row 2 Header</th>
    <td>Data 2</td>
  </tr>
</table>

Explanation:

  • <table>: This tag defines the start of a table.
  • <tr>: Stands for "table row." Each <tr> creates a new row in the table.
  • <th>: Represents a table header cell. In this case, <th> elements are used within the rows to create header cells for each row.
    • <th scope="row">Row 1 Header</th>: This creates a header cell in the first row with the text "Row 1 Header." The scope="row" attribute indicates that this header cell pertains to the row.
    • <th scope="row">Row 2 Header</th>: This creates a header cell in the second row with the text "Row 2 Header." Similar to the previous <th>, the scope="row" attribute is used to indicate that this header cell pertains to the row.
  • <td>: Represents a standard table data cell. These cells contain the actual data displayed within the table.
    • <td>Data 1</td>: This cell contains the text "Data 1" in the first row, associated with the header "Row 1 Header."
    • <td>Data 2</td>: This cell contains the text "Data 2" in the second row, associated with the header "Row 2 Header."

The table structure created by this HTML code is as follows:

Row 1 Header Data 1
Row 2 Header Data 2
  • The <th> elements in each row represent header cells for those rows, indicating the description or context of the data in that row.
  • The <td> elements represent data cells, containing the actual content for each row.

Column and Row Headers:

<table>
  <thead>
    <tr>
      <th></th> <!-- Empty header cell for layout -->
      <th scope="col">Column 1</th>
      <th scope="col">Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row 1</th>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <th scope="row">Row 2</th>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </tbody>
</table>

Explanation:

  • <table>: This tag defines the start of a table.
  • <thead>: Represents the table head section, typically used for headers that apply to columns.
    • <tr>: Stands for "table row" within the table head section.
      • <th></th>: An empty header cell that doesn't contain any text. It is used to maintain consistency with other columns.
      • <th scope="col">Column 1</th>: Creates a header cell labeled "Column 1" associated with the first column. The scope="col" attribute specifies that this <th> represents a column header.
      • <th scope="col">Column 2</th>: Creates a header cell labeled "Column 2" associated with the second column. Similar to the previous <th>, it is also a column header.
  • <tbody>: Represents the table body section, used for the actual content of the table.
    • <tr>: Each <tr> creates a new row within the table body.
      • <th scope="row">Row 1</th>: Creates a header cell labeled "Row 1" associated with the first row. The scope="row" attribute specifies that this <th> represents a row header.
      • <td>Data 1</td>: Represents the data cell with the content "Data 1" in the first column of the first row.
      • <td>Data 2</td>: Represents the data cell with the content "Data 2" in the second column of the first row.
      • Similarly, the second <tr> contains headers for rows, <td> elements with data for each column in the second row.

The table structure created by this HTML code is as follows:

  Column 1 Column 2
Row 1 Data 1 Data 2
Row 2 Data 3 Data 4
  • The <thead> section contains column headers (<th scope="col">).
  • The <tbody> section contains rows with row headers (<th scope="row">) and data cells (<td>), forming the main content of the table.

The use of <thead> and <tbody> sections, along with proper <th> and <td> elements, helps organize the table's structure, separating headers from content and improving accessibility and readability.

Using <th> elements with appropriate scope attributes ensures proper semantic markup, aiding accessibility tools like screen readers to interpret table structures accurately. This helps users understand the relationships between headers and data cells in the table.

Merging Table Columns

Sometimes you may need to merge more than one coulmn. To merge columns, use the colspan attribute:

<table>
  <tr>
    <th colspan="2">Merged Heading</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Explanation:

<th colspan="2">Merged Heading</th>: This line creates a header cell that spans across two columns (colspan="2"). The colspan attribute is used to merge cells horizontally.

The table structure created by this HTML code is as follows:

Merged Heading
Data 1 Data 2

Merging Table Rows

Sometimes you may need to merge more than one eow. Merging rows is achieved with the rowspan attribute:

<table>
  <tr>
    <th rowspan="2">Heading 1</th>
    <td>Data 1</td>
  </tr>
  <tr>
    <td>Data 2</td>
  </tr>
</table>

Explaniation:

<th rowspan="2">Heading 1</th>: This line creates a header cell (<th>) that spans across two rows (rowspan="2"). The rowspan attribute is used to merge cells vertically.

The table structure created by this HTML code is as follows:

Heading 1 Data 1
Data 2

Handling Large Tables

The <thead>, <tbody>, and <tfoot> elements in HTML are used to structure and organize tables, providing a clear separation between different parts of the table: the head, body, and footer, respectively.

<thead> - Table Head Section:

  • Purpose: The <thead> element is used to contain the header rows of a table.
  • Content: It typically includes row(s) with <th> (table header) elements that represent column headers or titles for the data in the table.
  • Usage: It's placed right after the <table> opening tag and before the <tbody> or <tfoot> sections.

Example:

<table>
  <thead>
    <tr>
      <th>Column 1 Header</th>
      <th>Column 2 Header</th>
    </tr>
  </thead>
  <!-- tbody and tfoot sections here -->
</table>

<tbody> - Table Body Section:

  • Purpose: The <tbody> element contains the main body of the table's content.
  • Content: It includes row(s) with <td> (table data) elements that represent the actual data or information within the table.
  • Usage: It follows the <thead> section and precedes the <tfoot> section (if present).

Example:

<table>
  <thead>
    <!-- Header rows with <th> elements -->
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <!-- More rows with table data -->
  </tbody>
  <!-- tfoot section here if needed -->
</table>

<tfoot> - Table Footer Section:

  • Purpose: The <tfoot> element contains footer information or summaries related to the table.
  • Content: It typically includes row(s) with <td> elements or additional information summarizing the table data.
  • Usage: It's placed after the <tbody> section and ends the table structure.

Example:

<table>
  <thead>
    <!-- Header rows with <th> elements -->
  </thead>
  <tbody>
    <!-- Rows with <td> elements -->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Footer information</td>
    </tr>
  </tfoot>
</table>

Benefits:

  • Structural Clarity: Separating the table into distinct sections (head, body, footer) improves readability and organization of the table's content.
  • Accessibility: It aids assistive technologies like screen readers by providing clear delineation between different parts of the table.
  • Styling and Manipulation: Allows for easier CSS styling or JavaScript manipulation of specific table sections.

Code Example:

<table>
	<thead>
		<tr>
			<th>Month</th>
			<th>Income</th>
			<th>Expense</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>January</th>
				<td>25000</td>
				<td>24000</td>
		</tr>
		<tr>
			<th>February</th>
				<td>20000</td>
				<td>19500</td>
		</tr>
		<tr>
			<th>March</th>
				<td>30000</td>
				<td>22000</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Total:</td>
			<td>75000</td>
			<td>65500</td>
		</tr>
    </tfoot>
 </table>

The table structure created by this HTML code is as follows:

Month Income Expense
January 25000 24000
February 20000 19500
March 30000 22000
Total: 75000 65500

Displaying Image Inside a Table Cell

Below is an example of HTML code displaying an image inside a table cell.

`<table>
  <tr>
    <td>Cell with Image</td>
    <td><img src="flower.jpg" alt="Flower Image"></td>
  </tr>
</table>

Explanation:

  • <table>: Defines the start of the table.
  • <tr>: Represents a table row.
  • <td>Cell with Image</td>: Creates a table data cell with text content.
  • <td><img src="flower.jpg" alt="Flower Image"></td>: Creates another table data cell with an image inserted using the <img> tag. The src attribute specifies the image URL, and the alt attribute provides alternative text for the image (useful for accessibility).

In this example, an image is included in the second cell of the table using the <img> tag. You can replace the image URL (src attribute) with the URL of the desired image you want to display inside the table cell.

Displaying Table Border

Below is an example of HTML code that demonstrates how to style table borders.

<table border="1">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
</table>

Explanation:

<table border="1">: This tag creates an HTML table and includes the border="1" attribute, which sets the table's border to 1 pixel width. It applies a border around the table and its cells. 

Setting Background Color in a Table

Setting Background Color of Entire Table

To set background color of a table, you can use  "background-color" style in <table> tag.

<table style="background-color: yellow">
  <tr>
    <th>Column 1 Header</th>
    <th>Column 2 Header</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td >Data 2</td>
  </tr>
</table>

The above code will set the background color of entire table to yellow. The Output of above code is:

Column 1 Header Column 2 Header
Data 1 Data 2

Setting Background Color of a Cell

You can use "background-color" style to apply color to a table cell.

<table>
  <tr>
    <th>Column 1 Header</th>
    <th>Column 2 Header</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td style="background-color: yellow">Data 2</td>
  </tr>
</table>

The above code will set the background color of column 2 in row 1 to yellow. The Output of above code is:

Column 1 Header Column 2 Header
Data 1 Data 2

Setting Background Color of Entire Column

To set background color of entire coulmn, you can use <col> element. <col> element is defined inside <colgroup> element. In the following code we will uses these two elemens to set the background color of entire column in a table.

<table>
  <colgroup>
    <col />
    <col style="background-color: yellow" />
    <col />
  </colgroup>
  <tr>
    <th>Column 1 Header</th>
    <th>Column 2 Header</th>
    <th>Column 3 Header</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

Explanation:

  • <table>: This tag defines the start of a table.
  • <colgroup>: The <colgroup> element allows the grouping of columns in the table and can contain one or more <col> elements to define specific styles or attributes for each column or group of columns.
    • <col>: Represents a single column within the column group. In this case, there are three <col> elements defined within the <colgroup>.
      • <col />: This represents the first column and doesn’t have any specific styling or attributes applied.
      • <col style="background-color: yellow" />: This <col> element applies an inline style to the second column, setting its background color to yellow.
      • <col />: This represents the third column and, similar to the first column, doesn’t have any specific styling or attributes applied.

The table structure created by this HTML code includes column grouping and styles as follows:

Column 1 Header Column 2 Header Column 3 Header
Data 1 Data 2 Data 3

Adding Caption to Table

The <caption> element in HTML is used to add a caption or title to an HTML table.

<table>
  <caption>Sample Table Caption</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

Explanation:

  • <caption>Sample Table Caption</caption>: The <caption> element is placed immediately after the opening <table> tag and provides a title or caption for the table. In this example, it's set as "Sample Table Caption."

Setting Table Width

To set the width of an HTML table, you can use the width attribute in the <table> tag.

<table width="50%">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <!-- More rows and cells -->
</table>

Explanation:

  • In the <table> tag, the width="50%" attribute is used to set the width of the table to 50% of its container. This means the table will take up half the width of its containing element.

Use CSS for table styling, it a preferred method for setting table widths in modern web development.

Setting Column Width of Table

You can set the width of an HTML table cell (<td>) using the width attribute.

<table>
  <tr>
    <td width="100px">Cell 1</td> <!-- Set width to 100 pixels -->
    <td width="20%">Cell 2</td> <!-- Set width to 20% of table's width -->
    <td>Cell 3</td> <!-- No explicit width set -->
  </tr>
</table>

</body>
</html>

Explanation:

  • In the <td> tags, the width attribute is used to set specific widths for each table cell.
  • width="100px" sets the width of the first cell to 100 pixels.
  • width="20%" sets the width of the second cell to 20% of the table's width.
  • The third cell doesn't have an explicit width set, so it will adjust its width based on its content.

Setting Row Height of Table

You can set the row height of an HTML table using the height attribute in <tr>.

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr style="height:100px"> <!-- Apply a specific height -->
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
  <tr>
    <td>Cell 7</td>
    <td>Cell 8</td>
    <td>Cell 9</td>
  </tr>
</table>

Explanation:

  • style="height:100px": This inline style is applied to the second <tr> element. It sets the height of the second row to 100 pixels.
  • The rendered output in a web browser will display an HTML table with three rows and three cells in each row. The second row (<tr>) will have a height of 100 pixels, while the other rows will have their default heights.

Table Cell Spacing

In HTML, cell spacing refers to the space between cells in a table. The cellspacing attribute in the <table> tag controls the spacing between cells.

<table cellspacing="10">
  <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>

Explanation:

<table cellspacing="10">: The cellspacing attribute is set to 10, which specifies the space (in pixels) between cells in the table.

For CSS: border-spacing property in the CSS styling sets the cell spacing between the cells. 

Table Cell Padding

In HTML, cell padding refers to the space between the content of a table cell and its border (inside a cell). The cellpadding attribute in the <table> tag is used to control the padding inside table cells.

<table cellpadding="10">
  <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>

Explanation:

<table cellpadding="10">: The cellpadding="10" attribute is applied to the <table> tag. It sets the padding space within each cell of the table to 10 pixels.

For CSS: The padding property in the CSS section sets the padding for <th> and <td> elements within the table.

Nesting Tables Within Tables

Nesting tables within HTML tables involves placing one table inside another table's cell (<td>). 

<table border="1">
  <tr>
    <td>
      <h3>Main Table Cell 1</h3>
      <table>
        <tr>
          <td>Inner Table Cell 1</td>
          <td>Inner Table Cell 2</td>
        </tr>
        <tr>
          <td>Inner Table Cell 3</td>
          <td>Inner Table Cell 4</td>
        </tr>
      </table>
    </td>
    <td>
      <h3>Main Table Cell 2</h3>
      <table>
        <tr>
          <td>Inner Table Cell 5</td>
          <td>Inner Table Cell 6</td>
        </tr>
        <tr>
          <td>Inner Table Cell 7</td>
          <td>Inner Table Cell 8</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Explanation:

  • Two HTML tables are created inside the main table (<table border="1">) by nesting them within <td> elements.
  • Each <td> in the main table contains a nested table. These nested tables have their own structure, consisting of rows (<tr>) and cells (<td>) to form a simple grid.
  • The border="1" attribute in the main table is used to visually demonstrate the table borders for clarity. It adds a border around the outer table for visualization purposes.

The rendered output will display a main table with two cells (Main Table Cell 1 and Main Table Cell 2). Each cell contains a nested table with its own set of cells, forming a structure where tables are nested within the cells of the outer table.

Best Practices for Creating Accessible Tables

Creating accessible tables ensures that individuals with disabilities can access and understand the content presented in the tables. Here are some best practices for creating accessible tables:

1. Use Semantic HTML:

  • Use appropriate HTML tags like <table>, <th>, <tr>, and <td> to structure the table.
  • <th> tags should be used for table headers instead of <td> to define column and row headers.

2. Provide Table Headings:

  • Use <th> elements within <thead> to define headers for rows and columns.
  • Use <th scope="row"> for row headers and <th scope="col"> for column headers to clarify header associations.

3. Use Captions and Summaries:

  • Utilize <caption> to provide a brief description or summary of the table content.
  • The summary attribute (not supported in HTML5) can be used in the <table> tag to provide additional information about the table's purpose.

4. Include Row and Column Headers:

  • Use <thead> to contain the table headers (<th>) for rows and columns.
  • Use <tbody> to enclose the table's main content.
  • Use <tfoot> for the table footer if applicable.

5. Provide Descriptive Alt Text:

  • For tables containing images, use descriptive alt text for images within <td> elements to describe their content to screen readers.

6. Use ARIA Attributes:

  • Use ARIA (Accessible Rich Internet Applications) attributes to enhance accessibility for screen reader users.
  • For complex tables, consider adding role, aria-label, aria-describedby, or aria-labelledby attributes to provide context and descriptions.

7. Ensure Readability and Consistency:

  • Keep table structures simple and understandable.
  • Use proper contrast between text and background colors.
  • Maintain a logical reading order for screen reader users.

8. Test Accessibility:

  • Use accessibility evaluation tools like WAVE, Axe, or Lighthouse to check the table's accessibility compliance.
  • Perform manual testing with screen readers to ensure proper interpretation of table content.

9. Provide Tabular Data for Tables:

  • Ensure that the content presented in the table is genuinely tabular data and not just for layout purposes.

By following these best practices, you can create HTML tables that are more accessible to users with disabilities, improving the overall inclusivity and usability of your web content.

Using Semantic HTML Elements in Tables

Using semantic HTML elements appropriately in tables can significantly enhance accessibility for screen readers. Here's how you can structure an HTML table semantically for improved accessibility:

<table>
  <caption>List of Students</caption>
  <thead>
    <tr>
      <th scope="col">Student ID</th>
      <th scope="col">Name</th>
      <th scope="col">Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John Doe</td>
      <td>10</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane Smith</td>
      <td>9</td>
    </tr>
    <!-- Add more rows as needed -->
  </tbody>
</table>

Explanation:

  • <table>: Defines the beginning of the table.
  • <caption>: Provides a caption or summary of the table content.
  • <thead>: Contains the header row(s) of the table.
  • <tbody>: Encloses the main content (body) of the table.
  • <tr>: Represents table rows.
  • <th>: Represents table headers.
  • <td>: Represents table data cells.

Semantic HTML Features:

  • scope="col": Used in <th> elements within <thead> to define column headers.
  • scope="row": Applied to <th> elements within <tbody> to indicate row headers.

Accessibility Benefits:

  • Screen readers interpret the semantic markup to convey the structure of the table, distinguishing headers and data cells.
  • The use of <caption>, <thead>, <tbody>, <th>, and scope attributes provides context and improves understanding for users relying on screen readers.

When HTML Tables Should Not Be Used

While HTML tables are useful for presenting tabular data, there are situations where using tables might not be the best choice:

  1. Layout and Styling: Tables were historically used for layout purposes in web design. However, using tables for layout is outdated and not recommended. CSS, specifically CSS Grid or Flexbox, provides more efficient and responsive layout options.
  2. Accessibility and Semantics: When tables are misused for layout purposes, it can affect the semantics and accessibility of the content. Screen readers might interpret table-based layouts as data tables, causing confusion for users relying on assistive technologies.
  3. Responsive Design: Tables can present challenges in responsive design. Large tables might not adapt well to smaller screens, causing horizontal scrolling or content truncation. For responsive data presentation, other methods like lists, cards, or CSS grids might be more suitable.
  4. Complex Data Presentation: If the data doesn't fit the tabular structure or requires complex interactions like filtering, sorting, or extensive manipulation, using tables alone might limit functionality. Consider using JavaScript libraries or frameworks for dynamic and interactive data presentation.
  5. Mobile Optimization: Excessive use of tables can hinder mobile optimization. Tables might not render well on smaller screens, leading to a poor user experience. Consider alternative approaches for mobile-friendly designs.
  6. Content Structuring: For structuring content that isn't inherently tabular, such as articles, forms, or general page layouts, using semantic HTML elements like <section>, <article>, <aside>, <header>, <footer>, etc., is more appropriate.
  7. Emails: While tables are commonly used in HTML emails for better email client compatibility, creating complex layouts with tables in emails can be challenging and might not render consistently across different email clients.

In these cases, it's better to use appropriate HTML elements or CSS layout techniques that suit the content structure, accessibility, responsiveness, and overall design needs without relying on table-based layouts. Tables should primarily be used for presenting actual tabular data rather than for general page layout purposes.