Download presentation
Presentation is loading. Please wait.
1
Telerik Software Academy http://academy.telerik.com HTML5
2
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
4
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
5 Lecture 1 Lecture 1 Lecture 2 Lecture 2 Lecture 2 - Demos Lecture 2 - Demos </table>
6
Live Demo
7
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
8
Live Demo
9
With Header, Footer and Body
10
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
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
12
<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
13
Live Demo
14
Tables in Tables in Tables in Tables…
15
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
16
Live Demo
17
With Padding, Spacing and Stuff
18
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
19 <html> Table Cells Table Cells First First Second Second First Second First Second </html> table-cells.html
20
20 <html> Table Cells Table Cells First First Second Second First Second First Second </html> table-cells.html
21
Live Demo
22
How to Make a Two-Cells Column or Row?
23
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"
![ 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](http://images.slideplayer.com/32/9997744/slides/slide_23.jpg " 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
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
![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](http://images.slideplayer.com/32/9997744/slides/slide_24.jpg "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
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]
![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]](http://images.slideplayer.com/32/9997744/slides/slide_25.jpg "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]")
26
Live Demo
27
форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен 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# Николай Костов - блог за програмиране http://academy.telerik.com
28
"Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy html5course.telerik.com html5course.telerik.com Telerik Software Academy academy.telerik.com academy.telerik.com Telerik Academy @ Facebook facebook.com/TelerikAcademy facebook.com/TelerikAcademy Telerik Software Academy Forums forums.academy.telerik.com forums.academy.telerik.com
Similar presentations
