Computer scienceFrontendHTMLBasic TagsTables

Table Alignment

Theory

Set the alignment

Report a typo

The HTML code below has some errors. Find them and fix the code. Also, change the alignment settings as mentioned below:

  • Centre align the content of the <th> element horizontally.

  • Top align the content of the <th> element vertically.

  • Bottom align the content of the <td> element vertically.

The final output should look like this:

The table with First name, last name, Age columns

Write HTML and CSS code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alignment</title>
</head>

<body>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Age</th>
</thead>

<tbody>
<tr>
<td>Mark</td>
<td>Peterson</td>
<td>20</td>
</tr>

<tr>
<td>Henry</td>
<td>Joseph</td>
<td>23</td>
</tr>

<tr>
<td>Kaira</td>
<td>Paul</td>
<td>32</td>
</tr>

Completed 0 of 4
The code is valid
Centre align the content of the <th> element horizontally.
___

Create a free account to access the full topic