HTML Table Tags Flashcards for Beginners

The <tfoot> tag is used to define the footer section of an HTML table, which typically contains summary information or totals. The <tr> tag is used to define each row, and the <td> tag is used to define each footer cell. In the example code below, the footer row contains the content "Footer 1" and "Footer 2". 

<table>
   <tfoot>
      <tr>
         <td>Footer 1</td>
         <td>Footer 2</td>
      </tr>
   </tfoot>
</table>

The width attribute is used to specify the width of an HTML table. In the example code below, the width is set to 100%. 

<table width="100%">
   <tr>
      <td>Data 1</td>
      <td>Data 2</td>
   </tr>
</table>

The colspan attribute is used to specify the number of columns that a cell should span horizontally. In the example code below, the first cell in the first row spans two columns, while the second cell spans only one column. 

<table>
   <tr>
      <td colspan="2">Row 1, Column 1 and 2</td>
      <td>Row 1, Column 3</td>
   </tr>
   <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
   </tr>
</table>

The `summary` attribute is used to provide a summary description of an HTML table for accessibility purposes. In the example code below, the summary is "Table Summary".

<table summary="Table Summary">
   <tr>
      <td>Data 1</td>
      <td>Data 2</td>
   </tr>
</table>

The scope attribute is used to specify the scope of a header cell in an HTML table. The possible values for the scope attribute are col, row, colgroup, and rowgroup. In the example code below, the first row contains header cells with a scope of col and the second row contains a header cell with a scope of row.

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

The <td> tag is used to define a cell in an HTML table. Each cell contains the content of the table, such as text or images. In the example code below, there are four cells containing the text "Row 1, Column 1", "Row 1, Column 2", "Row 2, Column 1", and "Row 2, Column 2". 

<table>
   <caption>Table Caption</caption>
   <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>

The height attribute is used to specify the height of an HTML table. In the example code below, the height is set to 100 pixels. 

<table height="100">
   <tr>
      <td>Data 1</td>
      <td>Data 2</td>
   </tr>
</table>

The rowspan attribute is used to specify the number of rows that a cell should span vertically. In the example code below, the first cell in the first column spans two rows, while the other cells in the same row span only one row. 

<table>
   <tr>
      <td rowspan="2">Row 1 and 2, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
   </tr>
   <tr>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
   </tr>
</table>

The cellspacing attribute is used to specify the spacing between table cells. In the example code below, the spacing is set to 5 pixels.

<table cellspacing="5">
   <tr>
      <td>Data 1</td>
      <td>Data 2</td>
   </tr>
</table>

The border attribute is used to specify the border width of an HTML table. In the example code below, the border width is set to 1. 

<table border="1">
   <tr>
      <td>Data 1</td>
      <td>Data 2</td>
   </tr>
</table>

The <thead> tag is used to define the header section of an HTML table, which typically contains the column headings. The <tr> tag is used to define each row, and the <th> tag is used to define each header cell. In the example code below, the header row contains the column headings "Header 1" and "Header 2".

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

The <th> tag is used to define a cell to be a header cell in an HTML table. In the example code below, the first row contains header cells and the second row contains data cells. 

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

The caption is typically placed above or below the table and provides a brief description of the table's contents. In the example code below, the caption "Table Caption" is displayed above the table. 

<table>
   <caption>Table Caption</caption>
   <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>

The `<colgroup>` tag is used to group one or more columns in an HTML table for formatting purposes. The `<col>` tag is used to define each individual column. In the example code below, the first column is styled with a yellow background color, while the second column has no specific style. 

<table>
   <colgroup>
      <col style="background-color: yellow;">
      <col>
   </colgroup>
   <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>

The `<tbody>` tag is used to group one or more rows in an HTML table to be used as the table body. In the example code below, the `<tbody>` tag is used to group the single row in the table body.

<table>
   <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td>Footer 1</td>
         <td>Footer 2</td>
      </tr>
   </tfoot>
</table>

The <table> tag is used to create a table in an HTML document. Tables are made up of rows and columns, with each cell containing content. The content of a table is contained within the <tr> (table row) and <td> (table data) tags. In the example code, there are two rows and two columns. The content of each cell is specified between the opening and closing <td> tags.

<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>

The cellpadding attribute is used to specify the padding inside a table cell. In the example code below, the padding is set to 5 pixels.

<table cellpadding="5">
   <tr>
      <td>Data 1</td>
      <td>Data 2</td>
   </tr>
</table>

The <tr> tag is used to define a row in an HTML table. Each row contains one or more cells defined with the <td> tag. In the example code below, there are two rows each containing two cells.

<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>