Day-02 Nested Lists and Tables

Nested Lists

Task is to create a Nested list given below:

a Nested List

Here's how to create this type of list

HTML Code:

                
                <h3>Country List</h3>
                    <ul>
                    <li>India
                    <ul>
                    <li>Delhi</li>
                    <li>Mumbai</li>
                    <li>Goa</li>
                    </ul>
                </li>
                <li>USA
                    <ul>
                    <li>California</li>
                    <li>Texas</li>
                    </ul>
                </li>
                <li>England
                    <ul>
                    <li>London</li>
                    <li>Oval</li>
                    <li>Yorkshire</li>
                    </ul>
                </li>
                </ul>

The above code will output list as:

Country List

  • India
    • Delhi
    • Mumbai
    • Goa
  • USA
    • California
    • Texas
  • England
    • London
    • Oval
    • Yorkshire

Tables in HTML

A table is used to display data in rows and columns.

Example: like Excel sheets or a timetable.

Basic Table Tags

  • <table>:main container of the table.
  • <tr>:table row (horizontal line).
  • <td>:table data (cell inside a row).
  • <th>:table header (bold + centered by default).

Table Structure

  • <thead>:for headings.
  • <tbody>:main data rows.
  • <tfoot>:summary/footer rows.

Some Useful Attributes

  • border: used to display the border of table
  • colspan:Makes a cell stretch across multiple columns.Use when you want one cell to cover the space of 2 or more columns in the same row.
  • rowspan:Makes a cell stretch across multiple rows.Use when you want one cell to cover the space of 2 or more rows in the same column.

Sample Table:

a table

To create above table the code is given below:

                        
                            <table border="1">

                                <thead>
                                    <tr>
                                        <th>Column1</th>
                                        <th>Column2</th>
                                        <th>Column3</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr>
                                        <td rowspan="2">row1 cell1</td>
                                        <td>row1 cell2</td>
                                        <td>row1 cell3</td>
                                    </tr>

                                    <tr>
                                        <td>row2 cell2</td>
                                        <td>row2 cell3</td>
                                    </tr>
                                </tbody>

                                <tfoot>
                                    <tr>
                                        <td colspan="3">row3 cell1</td>
                                    </tr>
                                </tfoot>

                            </table>

This gives output:

Column1 Column2 Column3
row1 cell1 row1 cell2 row1 cell3
row2 cell2 row2 cell3
row3 cell1

That's all for Day-02

Search html table on google and try to create tables on your own.