Download presentation
Presentation is loading. Please wait.
1
Week 6 Creating Tables using HTML
2
Creating Tables using HTML
<head> <title>Creating Tables</title> </head> <body> <table border=“10” bgcolor=“red”> <tr colspan=“2”> <td> ></td></tr> </body> </html>
3
Creating Tables using HTML
An HTML table allows you to arrange data into rows & columns of cells. text, images, links, forms, form fields, other tables, etc.
4
A B C D E F G H I J K L M N O P Q R S T U V W X
5
A B C D E F G H I J K L M N O P Q R S T U V W X
6
A&B A C D E F G H I J K L M N O P Q R S T U V W X
7
A,B,G,H, M,N,S,T A C D E F G H I J K L M N O P Q R S T U V W X
8
A,B,G,H, M,N,S,T A C D E F G H I J K L M N O P & Q P R S T U V W X
9
A,B,G,H, M,N,S,T A C D E F G H I J K L M N O P & Q P R S T U V W X
10
A,B,G,H, M,N,S,T C D E F I J K L O P & Q R U V W X
11
Structure of an HTML Table
12
Columns
13
Rows
14
Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells
15
Border
16
Caption
17
Table header
18
Control width of each column
19
Control Height of each Row
20
Border
21
Border
22
Border
23
Border 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
24
Column span A A&B C D E F G H I J K L M N O P Q R S T U V W X
25
Column span A A&B C D E F G H I J K L M N O P Q R S T Column span
26
Row span A B C D E F G H I K L M N O Q R S T U W X
27
Row span A B C D E F G H I K L M N O Q S T U W X Row span
28
Row and Column span A B C C D E F G I H I M N O Q L S T U V W X
29
Pop Quiz ------- How many Columns? How many Rows?
B C D E F G H I J R L M K N O P P Q
30
Answer = 6 Columns A B C D E F G H I J R L M K N O P P Q
31
Answer = 4 Rows A B C D E F G H I J R L M K N O P P Q
32
Answer = 6 Columns and 4 Rows
B C D E F G H I J R L M K N O P P Q
33
Pop Quiz # 2 How many Columns? How many Rows? A B C D E G H I J R M K N O P P Q S
34
Answer: Columns = 6 Rows = 5 Pop Quiz # 2 How many Columns? How many Rows? A B C D E G H I J R M K N O P P Q S
35
Table 1 Table 2
36
Table 1 Table 2 Table 3
37
Table 1 Table 2 Table #2 is inside Table#1
38
Show me how !!
39
Table Tags Opening Tag Closing Tag Tag to create the Table:
Tag to create Caption: Optional Tag to create each Row: Tag to create Header Row: Optional Tag to create each Cell:
40
Table Tags Required In EVERY Table Opening Tag Closing Tag
Tag to create the Table: Tag to create Caption: Tag to create each Row: Tag to create Header Row: Tag to create each Cell:
41
Table Tags Opening Tag Closing Tag Tag to create the Table:
Tag to create Caption: <CAPTION> </CAPTION> Tag to create each Row: <TR> </TR> Tag to create Header Row: <TH> </TH> Tag to create each Cell: <TD> </TD>
42
Table Tags Nested Opening Tag Closing Tag Tag to create the Table:
<TR> </TR> <TD> </TD> <CAPTION> </CAPTION> <TH> </TH> Tag to create Caption: Tag to create each Row: Nested Tag to create Header Row: Tag to create each Cell:
43
<title>table one</title> </head> <body>
X O <html> <head> <title>table one</title> </head> <body> </body> </html>
44
X O <table> </table>
45
X O <table> <tr> </tr> </table>
46
<tr> </tr> <tr> </tr> <table>
X O <table> <tr> </tr> <tr> </tr> </table>
47
<tr> </tr> <tr> </tr> <tr> </tr>
X O <table> <tr> </tr> <tr> </tr> <tr> </tr> </table>
48
<tr> <td> </td> </tr> <table>
X O <table> <tr> <td> </td> </tr> </table>
49
<tr> <td>X </td> </tr> <table>
O <table> <tr> <td>X </td> </tr> </table>
50
<tr> <td>X </td> </tr> <table>
O <table> <tr> <td>X </td> </tr> </table>
51
<td>X </td> <td>O</td>
<table> <tr> <td>X </td> <td>O</td> </tr> </table>
52
<td>X</td> <td>O</td> <td>X</td>
<table> <tr> <td>X</td> <td>O</td> <td>X</td> </tr> </table>
53
<td>X</td> <td>O</td> <td>X</td>
<table> <tr> O X X <td>X</td> <td>O</td> <td>X</td> O O X </tr> </table>
54
X O X 1 Row 1 O X X 2 O O X 3 Row 2 Row 3 <tr>
<table> 1 <tr> <td>X</td> </tr> <td>O</td> Row 1 O X X 2 <tr> <td>O</td> </tr> <td>X</td> O O X 3 Row 2 <tr> <td>O</td> </tr> <td>X</td> Row 3 </table>
55
<table border= “1”>
X O X <table> <table border= “1”> <tr> <td>X</td> </tr> <td>O</td> O X X <tr> <td>O</td> </tr> <td>X</td> O O X <tr> <td>O</td> </tr> <td>X</td> </table>
56
<table border= “2”>
X O X <table border= “2”> <tr> <td>X</td> </tr> <td>O</td> O X X <tr> <td>O</td> </tr> <td>X</td> O O X <tr> <td>O</td> </tr> <td>X</td> </table>
57
<table border= “3”>
X O X <table border= “3”> <tr> <td>X</td> </tr> <td>O</td> O X X <tr> <td>O</td> </tr> <td>X</td> O O X <tr> <td>O</td> </tr> <td>X</td> </table>
58
? <table border= “0”> X O <tr> <td>X</td>
<td>O</td> <tr> <td>O</td> </tr> <td>X</td> <tr> <td>O</td> </tr> <td>X</td> </table>
59
<td align=“center”>X</td>
O <td align=“center”>X</td>
60
<td align=“right”>X</td>
O <td align=“right”>X</td>
61
align=“right”, “left”, “center”
X O valign=“middle” valign=“bottom” valign=“top”
62
<table border=“1”>
<tr> <td align=“center”>X</td> <td align=“center”>O</td> </tr> </table> X O
63
It’s YOUR Turn !
64
Using “ Notepad ” Create this table X O Title = “Table One”
File name = “table1.html”
66
????? X O
67
Additional Table Options Width = “pixels” or “%”
<html> <head> <title>Table One</title> </head> <table border=“1”> <tr> <td align=“center”>X</td> <td align=“center”>O</td> </tr> </table> </body> </html> Additional Table Options Width = “pixels” or “%” Height= “pixels” or “%” Cellpadding = “default 3” Cellspacing = “default 3” Bgcolor = “#RRGGBB” Bordercolor = “#RRGGBB” Align=“Left/Right/Center” <table border=“1” width=“100%” cellpadding=“3” cellspacing=“3” bgcolor=“#FFFFFF” align=“center”>
68
X O Cellpadding = “40” Bgcolor =“#00EEEE”
69
Two Web sites we looked at in week one
70
Font size = “5” Body bgcolor= "#ecdd99"
71
TABLE 1 - column 1 - row TABLE 4 - columns 1 - row
72
table border=“5” Align = “center” cellpadding=“15” 1 row 1 column table border="5" 1 row 4 columns
73
table border=“5” Align = “center” cellpadding=“15” 1 row 1 column table border="5" 1 row 4 columns
75
Row 1 Colspan = 4 Row 2 Colspan = 4 Row 3 Column 1 Column 2 Column 3 Column 4 Colspan = 4 Row 4
76
Row 1 Colspan = 4 Row 2 Colspan = 4 Row 3 Column 1 Column 2 Column 3 Column 4 Colspan = 4 Row 4
79
X O
80
X O O O X X
81
X O <html> <head> <title>Table One</title>
<table border=“1”> <tr> <td align=“center”>X</td> <td align=“center”>O</td> </tr> </table> </body> </html> X O
82
X O <html> <head> <title>Table One</title>
<table border=“1”> <tr> <td align=“center”>X</td> <td align=“center”>O</td> </tr> </table> </body> </html> X O <td colspan=“3”> O </td>
Similar presentations
