Logo

Video: HTML Tables (Bulgarian)

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

HTML Tables are used to represent data in a tabular format. Simple tables are created using HTML tags <table>, <tr> (table row), and <td> (table data). Complete HTML tables may also include <th> tags for header cells and <caption> tag for table caption. Nested tables are tables within tables. Complex tables have multiple levels of row and column spans, and may include styling using CSS. The width of cells can be specified using the width attribute, while cell spacing and padding can be adjusted using the cellspacing and cellpadding attributes respectively. Column and row span allows a cell to span multiple columns or rows, effectively merging cells together.

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