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°</td>
<td>29°</td>
<td>30°</td>
<td>26°</td>
<td>32°</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:
