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">
    <td><img src="ppt.gif"></td>
    <td><a href="lecture1.ppt">Lecture 1</a></td>
    <td><img src="ppt.gif"></td>
    <td><a href="lecture2.ppt">Lecture 2</a></td>
    <td><img src="zip.gif"></td>
    <td><a href="">
      Lecture 2 - Demos</a></td>

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
    <th>Full Name</th> <th>Mark</th>
    <td>Nikolay Kostov</td> <td>Very good (5)</td>
    <td>Ivan Ivanov</td> <td>Exellent (6)</td>

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

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

Nested Tables

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

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

  <head><title>Table Cells</title></head>
    <table cellspacing="15" cellpadding="0">
    <table cellspacing="0" cellpadding="10">

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 colspan="2">Cell[2,1]</td>
<tr class="2">
    <td rowspan="2">Cell[2,2]</td>
<tr class="3">