HTML tablosu kullanarak bir formu düzenlemek mümkündür. Aşağıda, bir formun tablo içinde nasıl düzenlenebileceğini gösteren basit bir örnek bulunmaktadır:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tablo ile Form Hizalama</title>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 20px;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<h2>Kayıt Formu</h2>
<table>
<tr>
<td><label for="ad">Adınız:</label></td>
<td><input type="text" id="ad" name="ad" required></td>
</tr>
<tr>
<td><label for="soyad">Soyadınız:</label></td>
<td><input type="text" id="soyad" name="soyad" required></td>
</tr>
<tr>
<td><label for="email">E-posta Adresiniz:</label></td>
<td><input type="email" id="email" name="email" required></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" value="Onayla">
<input type="reset" value="İptal">
</td>
</tr>
</table>
</body>
</html>
Bu örnekte, table
, tr
(satır), td
(hücre) ve th
(başlık) etiketleri kullanılarak bir tablo oluşturulmuştur. Her form öğesi bir tablo hücresi içinde yer almaktadır. colspan
özelliği, iki hücrenin tek bir satırda genişlemesine izin verir ve bu şekilde düğmeleri merkeze hizalar. CSS kullanılarak tablonun ve hücrelerin görünümü özelleştirilmiştir.