Logo

Video: HTML Tables (Bulgarian)

  • December 09, 2022
  • Nikolay Kostov (Nikolay.IT)

Topics covered:

  • HTML Tables
    • Simple Tables
    • Complete HTML Tables
    • Data cells and Header cells
  • Nested Tables
  • Complex tables
    • Cells Width
    • Cell Spacing and Padding
    • Column and Row Span

Video (in Bulgarian)

Presentation Content

HTML Tables

  • Tables represent tabular data
    • A table consists of one or several rows
    • Each row has one or more columns
  • Tables are comprised of several core tags:
    • <table></table> : begin/end table definition
    • <tr></tr> : create a table row
    • <td></td> : create tabular data (cell)
  • Tables should not be used for layout
    • Use CSS floats and positioning styles instead

Simple HTML Tables – Example

<table cellspacing="0" cellpadding="5">
  <tr>
    <td><img src="ppt.gif"></td>
    <td><a href="lecture1.ppt">Lecture 1</a></td>
  </tr>
  <tr>
    <td><img src="ppt.gif"></td>
    <td><a href="lecture2.ppt">Lecture 2</a></td>
  </tr>
  <tr>
    <td><img src="zip.gif"></td>
    <td><a href="lecture2-demos.zip">
      Lecture 2 - Demos</a></td>
  </tr>
</table>

Data Cells and Header Cells

  • Two kinds of cells in HTML tables
    • Data cells – containing the table data
    • Header cells – used for the column names or some more important cells
  • Why two kinds of cells?
    • Used to semantically separate the cells
<tr>
    <th>Full Name</th> <th>Mark</th>
</tr>
<tr>
    <td>Nikolay Kostov</td> <td>Very good (5)</td>
</tr>
<tr>
    <td>Ivan Ivanov</td> <td>Exellent (6)</td>
</tr>

Complete HTML Tables

  • Table rows split into three semantic sections: header , body and footer
    • <thead> denotes table header and contains <th> elements, instead of <td> elements
    • <tbody> denotes collection of table rows that contain the very data
    • <tfoot> denotes table footer but comes BEFORE the <tbody> tag
    • <colgroup> and <col> define columns (used to set column widths)

Complete HTML Table: Example

<table>
<colgroup>
  <col style="width:100px" /><col />
</colgroup>
<thead>
  <tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
  <tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
  <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
  <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>

Nested Tables

  • Table “cells” ( <td> ) can contain nested tables (tables within tables):
<table>
  <tr>
    <td>Contact:</td>
    <td>
      <table>
        <tr>
          <td>First Name</td>
          <td>Last Name</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Cell Spacing and Padding

  • Tables have two attributes related to space
    • cellspacing
      • Defines the empty space between cells
    • cellpadding
      • Defines the empty space around the cell content

Cell Spacing and Padding – Example

<html>
  <head><title>Table Cells</title></head>
  <body>
    <table cellspacing="15" cellpadding="0">
      <tr><td>First</td>
      <td>Second</td></tr>
    </table>
    <br/>
    <table cellspacing="0" cellpadding="10">
      <tr><td>First</td><td>Second</td></tr>
    </table>
  </body>
</html>

Column and Row Span

  • Cells have two attributes related to merging
    • colspan
      • Defines how many columns the cell occupies
    • rowspan
      • Defines how many rows the cell occupies

Column and Row Span – Example

<table cellspacing="0">
<tr class="1">
    <td>Cell[1,1]</td>
    <td colspan="2">Cell[2,1]</td>
</tr>
<tr class="2">
    <td>Cell[1,2]</td>
    <td rowspan="2">Cell[2,2]</td>
    <td>Cell[3,2]</td>
</tr>
<tr class="3">
    <td>Cell[1,3]</td>
    <td>Cell[2,3]</td>
</tr>
</table>

Share