Add Spacing Between Table Sections

HTML Structure

1. Create a table element
   Use the <table> tag to define the entire table structure.
2. Insert TBODY elements
   Inside the <table>, add one or more <tbody> tags to group rows together. Each <tbody> represents a separate section of the table.

CSS Styling

2. Set margin properties
   To create space between TBODY elements, use the margin property. You can set the top, right, bottom, or left margins individually or use shorthand notation:

   • Individual margins
     

     tbody {
       margin-top: 10px; /* Space above the TBODY */
       margin-right: 20px; /* Space to the right of the TBODY */
       margin-bottom: 15px; /* Space below the TBODY */
       margin-left: 30px; /* Space to the left of the TBODY */
     }
     

   • Shorthand notation
     

     tbody {
       margin: 10px 20px 15px 30px; /* Top, right, bottom, left margins */
     }
     

Example

<table>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
</table>

tbody {
  margin: 20px; /* Add 20px spacing around each TBODY */
}

Additional Considerations

• Cell spacing and padding
  You can also control the spacing between cells within a TBODY using the cellspacing attribute on the <table> tag or the padding property on the <td> cells.
• Nested TBODY elements
  If you have nested TBODY elements within each other, the spacing will apply to each individual TBODY.
• Border collapse
  If you have set border-collapse: collapse on the table, the spacing between TBODY elements might not be visible. You can adjust the border width or use other techniques to achieve the desired effect.

Adding Spacing Between TBODY Elements

<table>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
</table>

tbody {
  margin: 20px; /* Add 20px spacing around each TBODY */
}

• CSS
  
  • The tbody selector targets all TBODY elements within the table.
  • The margin property sets a uniform 20px spacing around each TBODY element, creating space between them.
• HTML
  
  • The <table> element defines the entire table structure.
  • Two <tbody> elements are used to group rows together, representing separate sections of the table.
  • Each <tbody> contains a single row with two cells.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Footer</td>
    </tr>
  </tfoot>
</table>

thead, tbody, tfoot {
  border: 1px solid black; /* Add borders for clarity */
}

tbody {
  margin-top: 20px; /* Add spacing above the TBODY */
  margin-bottom: 20px; /* Add spacing below the TBODY */
}

• CSS
  
  • The thead, tbody, and tfoot selectors target all header, body, and footer sections, respectively.
  • Borders are added to each section for better visualization.
  • The tbody selector specifically adds a 20px top and bottom margin, creating space between the body section and the header and footer sections.
• HTML
  
  • In addition to the <tbody> elements, the table also includes a <thead> for the header row and a <tfoot> for the footer row.
  • The <tfoot> spans both columns using the colspan="2" attribute.

Key Points

• Consider using borders or other visual elements to help identify the different sections and understand the spacing applied.
• You can customize the margin values to achieve the desired spacing based on your layout requirements.
• To add spacing between table sections, apply the margin property to the specific section you want to space (e.g., tbody) and adjust the top and bottom margins as needed.
• To add spacing between TBODY elements, apply the margin property directly to the tbody selector.

Alternative Methods for Adding Spacing in Tables

Using cellspacing Attribute

• Example
  

  <table cellspacing="10">
    </table>
  

  This will add a 10-pixel space between all cells in the table, including those within TBODY elements.
• Syntax
  <table cellspacing="number">
• Purpose
  Sets the space between cells in a table.

Using padding on Cells

• Example
  

  <table>
    <tbody>
      <tr>
        <td style="padding: 10px;">Cell 1</td>
        <td style="padding: 10px;">Cell 2</td>
      </tr>
    </tbody>
  </table>
  

  This will add a 10-pixel padding around the content of each cell, effectively creating space between cells and their borders.
• Syntax
  <td style="padding: 10px;">

Using border-spacing on the Table

• Syntax
  <table style="border-spacing: 10px;">
• Purpose
  Sets the space between the borders of adjacent cells.

Choosing the Right Method

• border-spacing
  Use when you want to add space between the borders of adjacent cells.
• padding
  Use when you want to add space around the content of individual cells.
• cellspacing
  Use when you want to add a consistent space between all cells in the table.

• CSS Frameworks
  Some CSS frameworks (like Bootstrap) provide utility classes for adding spacing to tables, making it easier to control the layout.
• border-collapse
  If border-collapse is set to collapse, the cellspacing and border-spacing properties might not have the desired effect.