جدول لعرض البيانات بشكل منظم في صفوف وأعمدة.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Table Example</title>
</head>
<body>
<table style="width: 80%; margin: 20px auto; border-collapse: collapse;">
<thead>
<tr style="background-color: #007BFF; color: #fff;">
<th style="padding: 10px; border: 1px solid #ddd;">ID</th>
<th style="padding: 10px; border: 1px solid #ddd;">Name</th>
<th style="padding: 10px; border: 1px solid #ddd;">Email</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px; border: 1px solid #ddd;">1</td>
<td style="padding: 10px; border: 1px solid #ddd;">Alice</td>
<td style="padding: 10px; border: 1px solid #ddd;">[email protected]</td>
</tr>
<tr style="background-color: #fff;">
<td style="padding: 10px; border: 1px solid #ddd;">2</td>
<td style="padding: 10px; border: 1px solid #ddd;">Bob</td>
<td style="padding: 10px; border: 1px solid #ddd;">[email protected]</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px; border: 1px solid #ddd;">3</td>
<td style="padding: 10px; border: 1px solid #ddd;">Charlie</td>
<td style="padding: 10px; border: 1px solid #ddd;">[email protected]</td>
</tr>
</tbody>
</table>
</body>
</html>
ID | Name | |
---|---|---|
1 | Alice | [email protected] |
2 | Bob | [email protected] |
3 | Charlie | [email protected] |