Create a centered HTML table with a blue solid border, large bold-caption, lightblue background for the header, and a 500px width. Body cells have a red bottom border, and text is 20px Arial or sans-serif.
Here is an example HTML and CSS code to create and configure the specified table:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Details</title>
<style>
table {
width: 500px;
margin: auto;
border: 2px solid blue;
border-collapse: collapse;
}
caption {
font-size: large;
font-weight: bold;
}
thead {
background-color: lightblue;
}
tbody {
font-size: 20px;
font-family: Arial, sans-serif;
}
tbody td {
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<table>
<caption>System Details</caption>
<thead>
<tr>
<th>Level 1</th>
<th>Level 2</th>
<th>Level 3</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>System</td>
<td>System Apps</td>
<td>System Env</td>
<td>App Test</td>
</tr>
<tr>
<td></td>
<td></td>
<td>System Env2</td>
<td>App Test</td>
</tr>
<tr>
<td></td>
<td>System Memory</td>
<td>Memory Test</td>
<td>Memory Function</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>Apps Test</td>
</tr>
</tbody>
</table>
</body>
</html>
This code snippet creates an HTML table with the specified styles using CSS. Adjustments can be made as needed.
The complete question is:
(attached)