html tables tables, rows, columns, cells, header, footer, colspan, rowspan svetlin nakov technical...
TRANSCRIPT
![Page 1: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/1.jpg)
HTML TablesTables, Rows, Columns, Cells,
Header, Footer, Colspan, Rowspan
Svetlin NakovTechnical Trainerwww.nakov.comSoftware Universityhttp://softuni.bg
![Page 2: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/2.jpg)
2
1. HTML Tables Simple Tables Complete HTML Tables Data, Header and Footer Cells
2. Nested Tables
3. Complex Tables Cells Width Cell Spacing and Padding Column and Row Span
Table of Contents
![Page 3: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/3.jpg)
HTML Tables
![Page 4: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/4.jpg)
4
Tables represent tabular data A table consists of one or several rows Each row has one or more columns
Tables comprised of several core tags: <table></table>: begin / end the table <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
HTML Tables
![Page 5: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/5.jpg)
5
Simple HTML Tables – Example<table cellspacing="0" cellpadding="5"> <tr> <td><img src="ppt.gif"></td> <td><a href="lesson1.ppt">Lesson 1</a></td> </tr> <tr> <td><img src="ppt.gif"></td> <td><a href="lesson2.ppt">Lesson 2</a></td> </tr> <tr> <td><img src="zip.gif"></td> <td><a href="lesson2-demos.zip">Lesson 2 - Demos</a></td> </tr></table>
![Page 6: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/6.jpg)
Simple HTML TablesLive Demo
![Page 7: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/7.jpg)
Two kinds of cells in HTML tables Data cells
Hold the table data – <td> Header cells
Hold the column names – <th> Semantically separate data and headers
Data Cells and Header Cells
<tr> <th>Full Name</th> <th>Grade</th> </tr><tr> <td>Mariela Anderson</td> <td>Very Good (5)</td> </tr><tr> <td>Georgi Georgiev</td> <td>Exellent (6)</td> </tr>
![Page 8: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/8.jpg)
Data and Header CellsLive Demo
![Page 9: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/9.jpg)
Complete HTML TablesWith Header, Footer and Body
![Page 10: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/10.jpg)
10
Table rows split into several semantic sections: <thead> denotes the table header
Contains <th> elements, instead of <td> cells <tbody> denotes collection of table rows holding table data <tfoot> denotes table footer
It may comes before the <tbody> elements, but is displayed last <colgroup> and <col> define columns
Used to assign column widths
Complete HTML Tables
![Page 11: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/11.jpg)
11
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>
table header
footer
Last comes the body (data)
<th> header column
column width definitions
![Page 12: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/12.jpg)
<table><colgroup> <col style="width:200px" /><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>12
Complete HTML Table: Example (2)
Although the footer is before the data in the
code, it is displayed last
Deprecated: use CSS instead!
![Page 13: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/13.jpg)
Complete HTML TablesLive Demo
![Page 14: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/14.jpg)
Nested TablesTables in Tables in Tables in Tables…
![Page 15: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/15.jpg)
15
Table "cells" (<td>) can contain nested tables (tables within tables):
Nested Tables
<table> <tr> <td>Contact:</td> <td> <table> <tr> <td>First Name</td> <td>Last Name</td> </tr> </table> </td> </tr></table>
![Page 16: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/16.jpg)
Nested TablesLive Demo
![Page 17: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/17.jpg)
Complex TablesWith Padding, Spacing, Etc.
![Page 18: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/18.jpg)
18
Tables have two attributes related to space
Cell Spacing and Padding
cellpadding
Defines the empty space around the cell content
cellspacing
Defines the empty space between cells
cell cell
cell cell
cell
cell
cell
cell
![Page 19: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/19.jpg)
19
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>
Deprecated: use CSS instead!
![Page 20: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/20.jpg)
Cell Spacing and Cell PaddingLive Demo
![Page 21: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/21.jpg)
Row and Column SpansHow to Make a Two-Cells
Column or Row?
![Page 22: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/22.jpg)
22
Cells have two attributes related to merging
Column and Row Span
rowspan
Defines how many rows the cell occupies
colspan
Defines how many columns the cell occupies
cell[1,1] cell[1,2]
cell[2,1]
colspan="1"colspan="1"
colspan="2"
cell[1,1]cell[1,2]
cell[2,1]
rowspan="2" rowspan="1"
rowspan="1"
![Page 23: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/23.jpg)
23
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>
![Page 24: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/24.jpg)
Row and Column Spans
Live Demo
![Page 25: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/25.jpg)
25
HTML tables Defined by <table>, <tr>, <td> tags Semantic tags: <thead>, <tbody>, <tfoot> Columns: <colgroup>, <col>, <th> Column / row span: colspan, rowspan
Styling tables: Prefer CSS Old tags: cellspacing, cellpadding, border
Summary
![Page 26: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/26.jpg)
Questions??
??
?
?
??
?
?
https://softuni.bg/courses/web-fundamentals/
HTML Tables
![Page 27: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/27.jpg)
License
This course (slides, examples, demos, videos, homework, etc.)is licensed under the "Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International" license
27
Attribution: this work may contain portions from "HTML Basics" course by Telerik Academy under CC-BY-NC-SA license
"CSS Styling" course by Telerik Academy under CC-BY-NC-SA license
![Page 28: HTML Tables Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan Svetlin Nakov Technical Trainer Software University](https://reader035.vdocuments.site/reader035/viewer/2022062217/5697c0031a28abf838cc3a73/html5/thumbnails/28.jpg)
Free Trainings @ Software University Software University Foundation – softuni.org Software University – High-Quality Education,
Profession and Job for Software Developers softuni.bg
Software University @ Facebook facebook.com/SoftwareUniversity
Software University @ YouTube youtube.com/SoftwareUniversity
Software University Forums – forum.softuni.bg