Download presentation
Presentation is loading. Please wait.
1
Learning & Development Team http://academy.telerik.com Telerik Software Academy
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./34/8367248/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./34/8367248/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./34/8367248/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
28 1. Create Web Pages like the following using tables: 2. Create a Web Page like the following using forms:
29
3. Create a Calculator-like table. You should use a HTML 5 form for the Calculator Buttons for all the numbers and operators (+, -, etc.) Textbox for the result Do not make the same styles as the example 29
Similar presentations
