Ayyıldız2 | 2008 TR Yapısı • 1-99 Orta Emek Destan • Oto Avsız • 10 Temmuz 21:00 HEMEN TIKLA!
Web geliştirme sürecinde, içeriklerin düzeni ve estetiği büyük önem taşır. Tablolar, bilgileri düzenli bir şekilde göstermek için sıkça kullanılan HTML öğeleridir. Ancak, bazen tabloların sayfa içerisinde doğru konumlandırılması gerekebilir. Bu makalede, CSS kullanarak bir tabloyu ortalamak için izlenecek adımları ayrıntılı bir şekilde ele alacağız.
1. Temel HTML Yapısını Oluşturma
Tabloyu ortalamadan önce, temel HTML yapısını oluşturmalıyız. Bu yapı, tablonun içeriğini ve yapısını belirleyecektir.
[CODE lang="html" title="html"]!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ortalanmış Tablo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<!-- Diğer satırlar buraya eklenebilir -->
</tbody>
</table>
</div>
</body>
</html>[/CODE]
2. CSS Kullanarak Tabloyu Ortalama
Tabloyu ortalamak için CSS kullanacağız. Bu işlem, tablo ve tablonun içeriğinin sayfa genişliğine göre otomatik olarak ortalanmasını sağlayacaktır.
[CODE lang="css" title="css"].table-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* İsteğe bağlı: Sayfa boyutuna göre ayarlayın */
}
table {
width: 80%; /* Tablo genişliğini istediğiniz oranda ayarlayın */
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}[/CODE]
Yukarıdaki CSS kodu, tablo ve#dddriğini ortalamak için display: flex ve justify-content: center gibi özellikleri kullanır. Bu sayede, tablo ve içeriği otomatik olarak sayfa genişliğine göre ortalanır.
Bu adımları takip ederek, CSS kullanarak bir tabloyu ortalamak mümkündür. Ortalanmış tablolar, sayfa düzenini düzenli tutar ve kullanıcıların içeriği daha kolay bir şekilde okumasına olanak tanır. CSS'nin gücünü kullanarak, web sayfalarını daha estetik ve kullanıcı dostu hale getirebiliriz.
1. Temel HTML Yapısını Oluşturma
Tabloyu ortalamadan önce, temel HTML yapısını oluşturmalıyız. Bu yapı, tablonun içeriğini ve yapısını belirleyecektir.
[CODE lang="html" title="html"]!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ortalanmış Tablo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<!-- Diğer satırlar buraya eklenebilir -->
</tbody>
</table>
</div>
</body>
</html>[/CODE]
2. CSS Kullanarak Tabloyu Ortalama
Tabloyu ortalamak için CSS kullanacağız. Bu işlem, tablo ve tablonun içeriğinin sayfa genişliğine göre otomatik olarak ortalanmasını sağlayacaktır.
[CODE lang="css" title="css"].table-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* İsteğe bağlı: Sayfa boyutuna göre ayarlayın */
}
table {
width: 80%; /* Tablo genişliğini istediğiniz oranda ayarlayın */
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}[/CODE]
Yukarıdaki CSS kodu, tablo ve#dddriğini ortalamak için display: flex ve justify-content: center gibi özellikleri kullanır. Bu sayede, tablo ve içeriği otomatik olarak sayfa genişliğine göre ortalanır.
Bu adımları takip ederek, CSS kullanarak bir tabloyu ortalamak mümkündür. Ortalanmış tablolar, sayfa düzenini düzenli tutar ve kullanıcıların içeriği daha kolay bir şekilde okumasına olanak tanır. CSS'nin gücünü kullanarak, web sayfalarını daha estetik ve kullanıcı dostu hale getirebiliriz.
Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)
Benzer konular
