1.3 TABLES

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>:

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

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

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.

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

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

(iii) Width:

(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: https://www.w3schools.com/colors/colors_names.asp By default, the table background color is same as the background color of the page.

REALITY: (v) Cell spacing: S.NO ROLL NUMBER ATTENDANCE 1 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

(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

Example: Cell spacing=10

Example: Cell spacing=0

Example: Cell spacing=1

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.

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

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

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.

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

<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>

<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>

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>

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

EXAMPLE 10: EXAMPLE 11: EXAMPLE 13: EXAMPLE 12:

EXAMPLE-1 : COMPLEX TABLES

<table border=1> <tr> <th rowspan = 2> NAME </th> </tr> OUTPUT: NAME PHONE NUMBER LAND-LINE MOBILE RAVI 08593-24248 999999999 SAI 08593-22412 888888888 </table>

<table border=1> <tr> <th rowspan = 2> NAME </th> <th colspan = 2> PHONE NUMBER </th> </tr> OUTPUT: PHONE NUMBER LAND-LINE MOBILE RAVI 08593-24248 999999999 SAI 08593-22412 888888888 </table>

<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 08593-24248 999999999 SAI 08593-22412 888888888 </table>

<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 08593-24248 999999999 SAI 08593-22412 888888888 </table>

<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 08593-24248 999999999 SAI 08593-22412 888888888 </table>

<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> 08593-224248 </td> </tr> 08593-24248 999999999 SAI 08593-22412 888888888 </table>

<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> 08593-224248 </td> <td> 9999999999 </td> </tr> 999999999 SAI 08593-22412 888888888 </table>

<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> 08593-224248 </td> <td> 9999999999 </td> </tr> <tr> <td> SAI </td> </tr> SAI 08593-22412 888888888 </table>

<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> 08593-224248 </td> <td> 9999999999 </td> </tr> <tr> <td> SAI </td> <td> 08593-22412 </td> </tr> 08593-22412 888888888 </table>

<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> 08593-224248 </td> <td> 9999999999 </td> </tr> <tr> <td> SAI </td> <td> 08593-22412 </td> <td> 8888888888 </td> </tr> 888888888 </table>

EXAMPLE -2 : COMPLEX TABLES

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

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

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

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

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