HTML CSS Exercise: HTML table

Solution:

HTML Code:

<table border="1"><!-- Begins a table with border attribute set to "1" -->
<tr><!-- Begins a table row -->
<td>Quick</td><!-- Adds a table data cell with the text "Quick" -->
<td colspan="2">brown fox</td><!-- Adds a table data cell with the text "brown fox" spanning 2 columns -->
<td>jumps</td><!-- Adds a table data cell with the text "jumps" -->
</tr><!-- Ends the first table row -->
<tr><!-- Begins a new table row -->
<td rowspan="3">over the</td><!-- Adds a table data cell with the text "over the" spanning 3 rows -->
<td>lazy</td><!-- Adds a table data cell with the text "lazy" -->
<td>dog</td><!-- Adds a table data cell with the text "dog" -->
<td>and</td><!-- Adds a table data cell with the text "and" -->
</tr><!-- Ends the second table row -->
<tr><!-- Begins another table row -->
<td>then</td><!-- Adds a table data cell with the text "then" -->
<td>it</td><!-- Adds a table data cell with the text "it" -->
<td>fall</td><!-- Adds a table data cell with the text "fall" -->
</tr><!-- Ends the third table row -->
<tr><!-- Begins a new table row -->
<td colspan="3">prey to a hunter</td><!-- Adds a table data cell with the text "prey to a hunter" spanning 3 columns -->
</tr><!-- Ends the fourth table row -->
</table><!-- Ends the table -->

Explanation:

• This HTML code represents a table with borders.
• The table has four rows (<tr>).
• The first row contains four cells (<td>), where the second cell spans two columns (colspan="2").
• The second row starts with a cell spanning three rows (rowspan="3"), followed by three cells.
• The third row has two cells.
• The fourth row has a single cell spanning three columns.

Live Demo :

See the Pen table-answer by w3resource (@w3resource) on CodePen.

Supported browser

Yes	Yes	Yes	Yes	Yes