Table
demo.html
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo - HTML Table</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
table {
border-collapse: collapse; /* merge borders */
width: 100%;
margin-bottom: 24px;
}
th, td {
border: 1px solid #ccc;
padding: 8px 12px;
text-align: left;
}
th {
background: #f3f4f6;
font-weight: bold;
}
caption {
caption-side: top;
font-weight: bold;
margin-bottom: 8px;
}
tbody tr:nth-child(even) {
background: #f9fafb;
}
</style>
</head>
<body>
<h1>Demo: HTML Table</h1>
<h2>1. Simple Table</h2>
<table>
<caption>Student Scores</caption>
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Subject</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ani</td>
<td>Math</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>English</td>
<td>85</td>
</tr>
<tr>
<td>3</td>
<td>Citra</td>
<td>Science</td>
<td>92</td>
</tr>
</tbody>
</table>
<h2>2. Table with Colspan</h2>
<table>
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Scores</th>
</tr>
<tr>
<th>Math</th>
<th>English</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ani</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>Budi</td>
<td>80</td>
<td>88</td>
</tr>
</tbody>
</table>
</body>
</html>
demo.html
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo - HTML Table</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
table {
border-collapse: collapse; /* merge borders */
width: 100%;
margin-bottom: 24px;
}
th, td {
border: 1px solid #ccc;
padding: 8px 12px;
text-align: left;
}
th {
background: #f3f4f6;
font-weight: bold;
}
caption {
caption-side: top;
font-weight: bold;
margin-bottom: 8px;
}
tbody tr:nth-child(even) {
background: #f9fafb;
}
</style>
</head>
<body>
<h1>Demo: HTML Table</h1>
<h2>1. Simple Table</h2>
<table>
<caption>Student Scores</caption>
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Subject</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ani</td>
<td>Math</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>English</td>
<td>85</td>
</tr>
<tr>
<td>3</td>
<td>Citra</td>
<td>Science</td>
<td>92</td>
</tr>
</tbody>
</table>
<h2>2. Table with Colspan</h2>
<table>
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Scores</th>
</tr>
<tr>
<th>Math</th>
<th>English</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ani</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>Budi</td>
<td>80</td>
<td>88</td>
</tr>
</tbody>
</table>
</body>
</html>