About Table

eg(Display example on screen)


Properties of a table

border and width,height,cellpadding,cellspacing


Child tags of a table

  • <caption> Title of the table

  • <thead><tbody><tfoot> Used to split the header, body, and footer of a table and is optional.

    The reason for this is to improve web accessibility and to make it easier to modify CSS by grouping header body footer (see thead's style in the example)

  • <colgroup><col span="n"> vertical rows of a table can be grouped and managed (see the style of <col span="2">in the example)

  • <tr> means row

  • <th>,<td> are used as child elements of tr

    Depending on whether tr is a header or body, th (for headers),td for body

    column

  • rowspan indicates the merge of rows and defaults to 1

  • colspan indicates the merge of columns and defaults to 1


<table border="1" width="300px" height="150px" style="table-layout: Fixed;">
   <colgroup>
    <col span="1"> <!-- Enclose column 1 -->
    <col span="2" style="background:beige;" /> <!-- Enclose columns 2 and 3 (since span="2" is set) -->
  </colgroup>
  <caption>
    caption
  </caption>
  <thead style="background:darkgrey;">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
   </thead>
  <tbody style="text-align:center;" >
    <tr>
        <td rowspan="2">rowspan = 2</td>
        <td colspan="2">colspan = 2</td>
    </tr>
    <tr>
        <td>8</td>
        <td>9</td>
    </tr>
   </tbody>
  <tfoot style="text-align:center;" >
    <tr>
      <td colspan="3">colspan = 3</td>
    </tr>
  </tfoot>
</table>


Table's table-layout attribute

  • Default <table style="table-layout: Auto;"> is set to auto

    When set to auto, the width of the columns will automatically be set according to the length of the content

  • Also, the <table style="table-layout: Fixed;"> will set the width of the columns evenly based on the width of the table without referring to the length of the content

    So it is also possible to apply the width of each td manually

If you don't know table-layout:Fixed had a problem with the width after colspan not being correct because I didn't know it was fixed, but Ben pointed out the above issue and I was able to fix it




Reference

Table Layout

May 23, 2024 Views 97