1. 1.3 TABLES

2. A table is a collection of data (or) organization of data in tabular form i.e in the form of rows and columns.
The different tags used to create tables in HTML are:
<TABLE>: It defines a table.
<TR>: It defines a Table Row.
<TH>: It defines a Table Head.
<TD>: It defines a Table Data.
<caption>: It is used to give a short description of a table or brief description or explanation about the table and helps you understand its purpose.
<thead>:

3. <th> S.NO ROLL NUMBER ATTENDANCE <tr> <tr>1
15FE1A0501 75 2
15FE1A0502 85
<tr>
<tr>
<tr>
<td>

4. S.NO ROLL NUMBER ATTENDANCE 1 15FE1A0501 75 2 15FE1A0502 85
The different attributes of <TABLE> tag are:
(i) Border:
When you create a table, it appears without border and looks incomplete because by default, the table border is set to zero..
You can add a border to a table using the following statement
<table border=1>
S.NO
ROLL NUMBER
ATTENDANCE 1
15FE1A0501 75 2
15FE1A0502 85

5. S.NO ROLL NUMBER ATTENDANCE
(ii) Align:
By default, the table in a web page is aligned to the left.
S.NO
ROLL NUMBER
ATTENDANCE 1
15FE1A0501 75 2
15FE1A0502 85
You can also align the cell content using align attribute.

6. S.NO ROLL NUMBER ATTENDANCE
By default, the table data is aligned to the left.
S.NO
ROLL NUMBER
ATTENDANCE 1
15FE1A0501 75 2
15FE1A0502 85

7. S.NO ROLL NUMBER ATTENDANCE
By default, the table head elements are aligned to center in bold font.
S.NO
ROLL NUMBER
ATTENDANCE 1
15FE1A0501 75 2
15FE1A0502 85

8. (iii) Width:

9. (iv) bgcolor:
If you want to change the background color for entire table, use the bgcolor attribute in the <table> tag.
To specify a color for bgcolor attribute, you can use
(i) RGB color codes
(ii) Color names.
You can find color names and color codes from the below link:
By default, the table background color is same as the background color of the page.

10. REALITY: (v) Cell spacing: S.NO ROLL NUMBER ATTENDANCE1
15FE1A0501 75 2
15FE1A0502 85
HUMAN’S PERCEPTION:
A table is a collection of
data in rows and columns.
REALITY:
A table is a collection of
data in rows and columns
in the form of cells.
S.NO
ROLL NO
ATTENDANCE 1
15FE1A0501 75 2
15FE1A0502 85

11. (v) Cell spacing:
It is used to specify the space between the borders of cells.
It controls the space between table cells. Although there is no official default, browsers usually use a default of 2. Example: Cell spacing=50

12. Example: Cell spacing=10

13. Example: Cell spacing=0

14. Example: Cell spacing=1

15. The default value for cell padding is 1.
(vi) Cell padding:
It sets the amount of space between the contents of the cell and the cell wall.
The default value for cell padding is 1.
Example: Cell padding for a single cell “S.NO”.
Cell padding=50
Cell padding=10
Cell padding=2
****Cell padding is an attribute for table tag i.e it is applied to all the cells in the table.
It cannot be applied to a single cell alone.
But to explain an example, I have applied to a
single cell.

16. The different attributes of <TR> tag are:
(i) align
(ii) bgcolor

17. The different attributes of <TH> and <TD> tags are:
Align
Width
Bgcolor
Rowspan
Colspan

18. There are two types of tables
(i) Simple Tables
(ii) Complex Tables
Simple Table: A simple table is a table which doesn’t contain spanned rows and columns.
Complex Table: A complex table is a table which contains spanned rows and columns.

19. TAGS TO REMEMBER FOR CREATING SIMPLE TABLES
<th>
S.NO
ROLL NUMBER
ATTENDANCE 1
15FE1A0501 75 2
15FE1A0502 85
<tr>
<tr>
<tr>
<td>

20. <table border = 1>
<tr>
<th>
NAME
</th>
<th>
FAVOURITE COLOR
</th>
</tr>
<tr>
<td>
Sai Krishna
</td>
NAME
FAVOURITE COLOR
Sai Krishna
Blue
Naveen
Yellow
Sudheer
Green
<td>
Blue
</td>
</tr>
<tr>
<td>
Naveen
</td>
<td>
Yellow
</td>
</tr>
<tr>
<td>
Sudheer
</td>
<td>
Green
</td>
</tr>
</table>

21. <table border = 1>
<tr>
<th>
S.NO
</th>
<th>
ROLL NUMBER
</th>
<th>
ATTENDANCE
</th>
</tr>
<tr> 1
<td>
</td>
S.NO
ROLL NUMBER
ATTENDANCE 1
15FE1A0501 75 2
15FE1A0502 85
<td>
15FE1A0501
</td>
<td> 75
</td>
</tr>
<tr>
<td> 2
</td>
<td>
15FE1A0502
</td>
<td> 85
</td>
</tr>
</table>

22. Complex tables <th rowspan=“2”> dept </th> (Or)
Complex Table: A complex table is a table which contains spanned rows and columns.
Dept
Dept
Dept
Dept
Merge down
Merge across
<th rowspan=“2”> dept </th>
(Or)
<th colspan=“2”> dept </th>
(Or)
<td rowspan=“2”> dept </td>
<td colspan=“2”> dept </td>

23. EXAMPLE 1:
EXAMPLE 2:
EXAMPLE 3:
EXAMPLE 4:
EXAMPLE 5:
EXAMPLE 6:
EXAMPLE 7:
EXAMPLE 8:
EXAMPLE 9:

24. EXAMPLE 10:
EXAMPLE 11:
EXAMPLE 13:
EXAMPLE 12:

25. EXAMPLE-1 : COMPLEX TABLES

26. <table border=1>
<tr>
<th rowspan = 2>
NAME
</th>
</tr>
OUTPUT:
NAME
PHONE NUMBER
LAND-LINE
MOBILE
RAVI
SAI
</table>

27. <table border=1>
<tr>
<th rowspan = 2>
NAME
</th>
<th colspan = 2>
PHONE NUMBER
</th>
</tr>
OUTPUT:
PHONE NUMBER
LAND-LINE
MOBILE
RAVI
SAI
</table>

28. <table border=1>
<tr>
<th rowspan = 2>
NAME
</th>
<th colspan = 2>
PHONE NUMBER
</th>
</tr>
<tr>
<th >
LAND-LINE
</th>
</tr>
OUTPUT:
LAND-LINE
MOBILE
RAVI
SAI
</table>

29. <table border=1>
<tr>
<th rowspan = 2>
NAME
</th>
<th colspan = 2>
PHONE NUMBER
</th>
</tr>
<tr>
<th >
LAND-LINE
</th>
<th >
MOBILE
</th>
</tr>
OUTPUT:
MOBILE
RAVI
SAI
</table>

30. <table border=1>
<tr>
<th rowspan = 2>
NAME
</th>
<th colspan = 2>
PHONE NUMBER
</th>
</tr>
<tr>
<th >
LAND-LINE
</th>
<th >
MOBILE
</th>
</tr>
<tr>
<td>
RAVI
</td>
OUTPUT:
</tr>
RAVI
SAI
</table>

31. <table border=1>
<tr>
<th rowspan = 2>
NAME
</th>
<th colspan = 2>
PHONE NUMBER
</th>
</tr>
<tr>
<th >
LAND-LINE
</th>
<th >
MOBILE
</th>
</tr>
<tr>
<td>
RAVI
</td>
OUTPUT:
<td>
</td>
</tr>
SAI
</table>

32. <table border=1>
<tr>
<th rowspan = 2>
NAME
</th>
<th colspan = 2>
PHONE NUMBER
</th>
</tr>
<tr>
<th >
LAND-LINE
</th>
<th >
MOBILE
</th>
</tr>
<tr>
<td>
RAVI
</td>
OUTPUT:
<td>
</td>
<td>
</td>
</tr>
SAI
</table>

33. <table border=1>
<tr>
<th rowspan = 2>
NAME
</th>
<th colspan = 2>
PHONE NUMBER
</th>
</tr>
<tr>
<th >
LAND-LINE
</th>
<th >
MOBILE
</th>
</tr>
<tr>
<td>
RAVI
</td>
OUTPUT:
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
SAI
</td>
</tr>
SAI
</table>

34. <table border=1>
<tr>
<th rowspan = 2>
NAME
</th>
<th colspan = 2>
PHONE NUMBER
</th>
</tr>
<tr>
<th >
LAND-LINE
</th>
<th >
MOBILE
</th>
</tr>
<tr>
<td>
RAVI
</td>
OUTPUT:
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
SAI
</td>
<td>
</td>
</tr>
</table>

35. <table border=1>
<tr>
<th rowspan = 2>
NAME
</th>
<th colspan = 2>
PHONE NUMBER
</th>
</tr>
<tr>
<th >
LAND-LINE
</th>
<th >
MOBILE
</th>
</tr>
<tr>
<td>
RAVI
</td>
OUTPUT:
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
SAI
</td>
<td>
</td>
<td>
</td>
</tr>
</table>

36. EXAMPLE -2 : COMPLEX TABLES

37. <table border=1>
<tr>
<th colspan = 3>
BILL SUMMARY
</th>
</tr>
OUTPUT:
BILL SUMMARY
S.NO
ITEM NAME
AMOUNT 1
RICE BAG
1200 Rs
TOTAL
1200 Rs
</table>

38. <table border=1>
<tr>
<th colspan = 3>
BILL SUMMARY
</th>
</tr>
<tr>
<th >
S.NO
</th>
</tr>
OUTPUT:
S.NO
ITEM NAME
AMOUNT 1
RICE BAG
1200 Rs
TOTAL
1200 Rs
</table>

39. <table border=1>
<tr>
<th colspan = 3>
BILL SUMMARY
</th>
</tr>
<tr>
<th >
S.NO
</th>
<th >
ITEM NAME
</th>
</tr>
OUTPUT:
ITEM NAME
AMOUNT 1
RICE BAG
1200 Rs
TOTAL
1200 Rs
</table>

40. <table border=1>
<tr>
<th colspan = 3>
BILL SUMMARY
</th>
</tr>
<tr>
<th >
S.NO
</th>
<th >
ITEM NAME
</th>
<th >
AMOUNT
</th>
</tr>
OUTPUT:
AMOUNT 1
RICE BAG
1200 Rs
TOTAL
1200 Rs
</table>

41. <table border=1>
<tr>
<th colspan = 3>
BILL SUMMARY
</th>
</tr>
<tr>
<th >
S.NO
</th>
<th >
ITEM NAME
</th>
<th >
AMOUNT
</th>
</tr>
<tr>
<td > 1
</td>
OUTPUT:
</tr> 1
RICE BAG
1200 Rs
TOTAL
1200 Rs
</table>

42. <table border=1>
<tr>
<th colspan = 3>
BILL SUMMARY
</th>
</tr>
<tr>
<th >
S.NO
</th>
<th >
ITEM NAME
</th>
<th >
AMOUNT
</th>
</tr>
<tr>
<td > 1
</td>
<td >
RICE BAG
</td>
OUTPUT:
</tr>
RICE BAG
1200 Rs
TOTAL
1200 Rs
</table>

43. <table border=1>
<tr>
<th colspan = 3>
BILL SUMMARY
</th>
</tr>
<tr>
<th >
S.NO
</th>
<th >
ITEM NAME
</th>
<th >
AMOUNT
</th>
</tr>
<tr>
<td > 1
</td>
<td >
RICE BAG
</td>
<td >
1200 Rs
</td>
OUTPUT:
</tr>
1200 Rs
TOTAL
1200 Rs
</table>

44. <table border=1>
<tr>
<th colspan = 3>
BILL SUMMARY
</th>
</tr>
<tr>
<th >
S.NO
</th>
<th >
ITEM NAME
</th>
<th >
AMOUNT
</th>
</tr>
<tr>
<td > 1
</td>
<td >
RICE BAG
</td>
<td >
1200 Rs
</td>
OUTPUT:
</tr>
<tr>
<td colspan = 2>
TOTAL
</td>
</tr>
TOTAL
1200 Rs
</table>

45. <table border=1>
<tr>
<th colspan = 3>
BILL SUMMARY
</th>
</tr>
<tr>
<th >
S.NO
</th>
<th >
ITEM NAME
</th>
<th >
AMOUNT
</th>
</tr>
<tr>
<td > 1
</td>
<td >
RICE BAG
</td>
<td >
1200 Rs
</td>
OUTPUT:
</tr>
<tr>
<td colspan = 2>
TOTAL
</td>
<td >
1200 Rs
</td>
</tr>
1200 Rs
</table>

46. EXAMPLE 1: EXAMPLE 2: DEPT EMP. INFORMATION E. NO E. NAME SALARY CSE
294
SAI
24,000
EEE
259
TEJA
29,000
EXAMPLE 2:
LIFE EXPECTANCY
OTHER EXPECTANCY
MEN
WOMEN
MEN
WOMEN 82 85 78 82

47. EXAMPLE 3: EXAMPLE 4: SAI KRISHNA MORNING AFTERNOON MONDAY FREE BUSY
TUESDAY
FREE
WEDNESDAY
BUSY
EXAMPLE 4: I II
III IV 1 2 3 4

48. EXAMPLE 5:
SAI
TEJA
FAVOURITE
COLOR
BLUE
YELLOW
SPORT
CRICKET
TENNIS

49. EXAMPLE 6: Invoice Item Description Qty Unit Price Price Paper Clips
100 1
100
Paper 10 45
450
Waste paper Baskets 2 10 20
Subtotal
570
Tax 7% 39
Total Bill Amount
609