Telerik Software Academy HTML5
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 2
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: : begin/end table definition : create a table row : create tabular data (cell) Tables should not be used for layout Use CSS floats and positioning styles instead 4
5 Lecture 1 Lecture 1 Lecture 2 Lecture 2 Lecture 2 - Demos Lecture 2 - Demos </table>
Live Demo
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> Full Name Mark Full Name Mark </tr><tr> Doncho Minkov Very good (5) Doncho Minkov Very good (5) </tr><tr> Georgi Georgiev Exellent (6) Georgi Georgiev Exellent (6) </tr> 7
Live Demo
With Header, Footer and Body
Table rows split into three semantic sections: header, body and footer denotes table header and contains elements, instead of elements denotes collection of table rows that contain the very data denotes table footer but comes BEFORE the tag and define columns (used to set column widths) 10
11 <table><colgroup> </colgroup><thead> Column 1 Column 2 Column 1 Column 2 </thead><tfoot> Footer 1 Footer 2 Footer 1 Footer 2 </tfoot><tbody> Cell 1.1 Cell 1.2 Cell 1.1 Cell 1.2 Cell 2.1 Cell 2.2 Cell 2.1 Cell 2.2 </tbody></table> header footer Last comes the body (data) th columns
<table><colgroup> </colgroup><thead> Column 1 Column 2 Column 1 Column 2 </thead><tfoot> Footer 1 Footer 2 Footer 1 Footer 2 </tfoot><tbody> Cell 1.1 Cell 1.2 Cell 1.1 Cell 1.2 Cell 2.1 Cell 2.2 Cell 2.1 Cell 2.2 </tbody></table> 12 table-full.html Although the footer is before the data in the code, it is displayed last
Live Demo
Tables in Tables in Tables in Tables…
Table "cells" ( ) can contain nested tables (tables within tables): 15 <table> Contact: Contact: First Name First Name Last Name Last Name </table> nested-tables.html
Live Demo
With Padding, Spacing and Stuff
cellpadding Defines the empty space around the cell content cellspacing Defines the empty space between cells Tables have two attributes related to space 18 cellcell cellcell cell cell cell cell
19 <html> Table Cells Table Cells First First Second Second First Second First Second </html> table-cells.html
20 <html> Table Cells Table Cells First First Second Second First Second First Second </html> table-cells.html
Live Demo
How to Make a Two-Cells Column or Row?
rowspan Defines how many rows the cell occupies colspan Defines how many columns the cell occupies Cells have two attributes related to merging 23 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"
24 <td>Cell[1,1]</td> Cell[2,1] Cell[2,1] </tr> <td>Cell[1,2]</td> Cell[2,2] Cell[2,2] <td>Cell[3,2]</td></tr> <td>Cell[1,3]</td><td>Cell[2,3]</td></tr></table> table-colspan-rowspan.html
25 <td>Cell[1,1]</td> Cell[2,1] Cell[2,1] </tr> <td>Cell[1,2]</td> Cell[2,2] Cell[2,2] <td>Cell[3,2]</td></tr> <td>Cell[1,3]</td><td>Cell[2,3]</td></tr></table> table-colspan-rowspan.html Cell[2,3]Cell[1,3] Cell[3,2] Cell[2,2] Cell[1,2] Cell[2,1]Cell[1,1]
Live Demo
форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен SEO курс - оптимизация за търсачки уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop уроци по програмиране и уеб дизайн за ученици ASP.NET MVC курс – HTML, SQL, C#,.NET, ASP.NET MVC безплатен курс "Разработка на софтуер в cloud среда" BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране, книги – безплатно от Наков безплатен курс "Качествен програмен код" алго академия – състезателно програмиране, състезания ASP.NET курс - уеб програмиране, бази данни, C#,.NET, ASP.NET курсове и уроци по програмиране – Телерик академия курс мобилни приложения с iPhone, Android, WP7, PhoneGap free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране
"Web Design with HTML 5, CSS 3 and JavaScript" Telerik Academy html5course.telerik.com html5course.telerik.com Telerik Software Academy academy.telerik.com academy.telerik.com Telerik Facebook facebook.com/TelerikAcademy facebook.com/TelerikAcademy Telerik Software Academy Forums forums.academy.telerik.com forums.academy.telerik.com