Home

Chapter 8: Images in HTML

Topics we are going to learn in this page:

1. table tag
2. tr tag
3. th tag
4. td tag
5. tfoot tag
6. colspan attribute
7. rowspan attribute

Explantion of the topics:

1. table

   • The <table> HTML element represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
   • In earlier days of web development website's navigation bar, main content, header, footer were desigened using the table. (Now days css flexbox and grid is used.)
   • "table>tr>th*3" + Enter Key : to automatically create a table with 3 table heading.
   • "tr*4>td*3" + Enter Key : to automatically create a table with (4 row X 3 column) data table.
   • <tr> means table row element, <th> means table heading element and <td> means table data element.
   • Press tab key after entering a data in a table head to go to another table-head or table-data for enterring data.
   • table, th, td needs to apply some css to see proper brdering. The th and td needs the "border" value and the table needs the "border-collapse" value as "collapse"

   • Example:
     Code:

         <!-- CSS part -->
         <style>
             table{
                 text-align: center;
                 width: 50%;
                 border-collapse: collapse;
             }
             td, th{
                 border: 2px solid black;
                 padding: 10px;
             }
             tr:nth-child(even){                 /* For this line, the following css properties will only appli on every even rows. */
                 background-color: #e6d6d6;
             }
         </style>
     
             
         <!-- HTML part -->
         <table>
             <tr>
                 <th>Country</th>
                 <th>Country code</th>
                 <th>Email</th>
             </tr>
             <tr>
                 <td>India</td>
                 <td>IN</td>
                 <td>india@google.com</td>
             </tr>
             <tr>
                 <td>America</td>
                 <td>USA</td>
                 <td>usa@google.com</td>
             </tr>
             <tr>
                 <td>Japan</td>
                 <td>JP</td>
                 <td>jp@google.com</td>
             </tr>
             <tr>
                 <td>China</td>
                 <td>CN</td>
                 <td>cn@google.com</td>
             </tr>
         </table>
                         

     Output:

     Country	Country code	Email
     India	IN	india@google.com
     America	USA	usa@google.com
     Japan	JP	jp@google.com
     China	CN	cn@google.com

2. colspan

   • colspan marge 2 or more column into 1 single column.

   • Example:
     code:

         <table>
             <tr>
                 <td colspan="2">1</td>
                 <!-- <td>2</td> -->
                 <td>3</td>
             </tr>
             <tr>
                 <td>4</td>
                 <td>5</td>
                 <td>6</td>
             </tr>
             <tr>
                 <td>7</td>
                 <td>8</td>
                 <td>9</td>
             </tr>
         </table>
                         

     Output

     1		3
     4	5	6
     7	8	9

3. rowspan

   • rowspan marge 2 or more roes into 1 single row.

   • Example:
     code:

         <table>
             <tr>
                 <td rowspan="3">1</td>
                 <td>2</td>
                 <td>3</td>
             </tr>
             <tr>
                 <!-- <td>4</td> -->
                 <td>5</td>
                 <td>6</td>
             </tr>
             <tr>
                 <!-- <td>7</td> -->
                 <td>8</td>
                 <td>9</td>
             </tr>
         </table>
                         

     Output

     1	2	3
     	5	6
     	8	9

   
   
   

4. tfoot

   The <tfoot> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the foot of a table with information about the table's columns. This is usually a summary of the columns, e.g., a sum of the given numbers in a column.




























---