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