How to create a table

                                  How to Create a table

On this blog you will also learn how to create multiple rows in a table, create tables with heading, how to merge table cells, and how to specify column width.

Steps on how to create a one row table.

1. Open Notepad.

2. Type the following code below in HTML:

<table>

     <tr>

        <td>Cell(2)</td>

        <td>Cell2</td>

        <td>Cell2</td>

     </tr>

</table>

OUTPUT:

Steps on how to create multiple rows in a table with a border line:

1. Open Notepad.

2. Type the following code below in HTML:

<table border="1">

      <tr>

         <td> Row 1 Cell 1</td>

         <td> Row 1 Cell 2</td>

         <td> Row 1 Cell 3</td>

      </tr>

      <tr>

        <td> Row 2 Cell 1</td>

        <td> Row 2 Cell 2</td>

        <td> Row 2 Cell 3</td>

     </tr>

     <tr>

        <td> Row 3 Cell 1</td>

        <td> Row 3 Cell 2</td>

        <td> Row 3 Cell 3</td>

     </tr>

</table>

OUTPUT:

Steps on how to create tables with a heading:

1. Open Notepad.

2. Type the following codes structure in HTML:

<table border="1">

     <tr>

        <th>Heading 1</th>

        <th>Heading 2</th>

        <th>Heading 3</th>

     </tr>

     <tr>

        <td> Row 2 Cell 1</td>

        <td> Row 2 Cell 2</td>

        <td> Row 2 Cell 3</td>

     </tr>

     <tr>

        <td> Row 3 Cell 1</td>

        <td> Row 3 Cell 2</td>

        <td> Row 3 Cell 3</td>

     </tr>

</table>

Steps on how to merge Columns as one in a table.

1. Open Notepad.

2. Insert the attribute colspan="n", where n is the number of columns to be united

<table border="1">

     <tr>

        <th colspan="3">Heading1</th>

     </tr>

     <tr>

        <td> Row 2 Cell 1</td>

        <td> Row 2 Cell 2</td>

        <td> Row 2 Cell 3</td>

     </tr>

     <tr>

        <td> Row 3 Cell 1</td>

        <td> Row 3 Cell 2</td>

        <td> Row 3 Cell 3</td>

     </tr>

     <tr>

</table>

OUTPUT:

Steps on how to merge Rows as one in a table.

1. Open notepad.

2. Insert the attribute rowspan="n", where n is the number of rows to be united.

<table border="1">

     <tr>

        <th colspan="3">Heading 1</th>

     </tr>

     <tr>

        <td rowspan="2">Row span</td>

        <td> Row 2 Cell 1</td>

        <td> Row 2 Cell 2</td>

     </tr>

     <tr>

        <td> Row 3 Cell 1</td>

        <td> Row 3 Cell 2</td>

     </tr>

</table>

OUTPUT:

Steps on how to specify column width.

1. Open Notepad.

2. Type <td width="n">, where n is the size value of the column width, similar to this:

<table border="1">

     <tr>

        <th colspan="3">Heading 1</th>

     </tr>

     <tr>

        <td rowspan="2"> Row span</td>

        <td width="20%"> Row 2 Cell 1</td>

        <td width="70"> Row 2 Cell 2</td>

     </tr>

     <tr>

        <td> Row 3 Cell 1</td>

        <td> Row 3 Cell 2</td>

     </tr>

</table>

Output:

Exercise on how to create a table

1. Open weatherforcast.html files in your PracticeFile-C5l13 folder in Notepad.

2. Type code below inside the <section> element:

            <h2>5 Day Weather Forecast</h2>

3. Type the following code below for the weather forcast data:

<h2>5 Day Weather Forecast </h2>

<table>

     <tr>

        <td rowspan="2"></td>

        <th>Monday</th>

        <th>Tuesday</th>

        <th>Wednesday</th>

        <th>Thursday</th>

        <th>Friday</th>

     </tr>

     <tr>

        <td>Sunny</td>

        <td>Partly Cloudy</td>

        <td>Mostly Sunny</td>

        <td>Cloudy</td>

        <td>Sunny</td>

     </tr>

     <tr>

        <td>Temp.</td>

        <td>31&deg</td>

        <td>29&deg</td>

        <td>30&deg</td>

        <td>26&deg</td>

        <td>32&deg</td>

     </tr>

     <tr>

        <td>Winds</td>

        <td>SW @ 10mph</td>

        <td>NE @ 11mph</td>

        <td>SE @ 10mph</td>

        <td>NW @ 9mph</td>

        <td>SW @ 10mph</td>

     </tr>

     <tr>

        <td>Chances of<br>Rain</td>

        <td>0%</td>

        <td>65%</td>

        <td>20%</td>

        <td>90%</td>

        <td>2%</td>

     </tr>

     <tr>

        <td>Sunrise</td>

        <td>5:30AM</td>

        <td>6:00AM</td>

        <td>5:25AM</td>

        <td>6:15AM</td>

        <td>5:45AM</td>

     </tr>

     <tr>

        <td>Sunset</td>

        <td>6:00PM</td>

        <td>5:45PM</td>

        <td>6:15PM</td>

        <td>5:40PM</td>

        <td>6:25PM</td>

     </tr>

</table>

OUTPUT: