Merhaba dostlar bu gün sıradaki konu ile karşınızdayım bu gün Tabloları göreceğiz fazla uzatmadan
konuya geçelim.
body nin içine ilk olarak normal bir tablo oluşturuyoruz
konuya geçelim.
body nin içine ilk olarak normal bir tablo oluşturuyoruz
HTML:
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>2</th>
<th>ddddd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>3</th>
<th>asdasd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>4</th>
<th>ffff</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
</tbody>
</table>
şimdi gelin bootstrap kütüphanemizi ekleyelim
HTML:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>2</th>
<th>ddddd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>3</th>
<th>asdasd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>4</th>
<th>ffff</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
</tbody>
</table>gördüğünüz gibi çok daha güzel oldu ancak sayfanın tamamını kapladı
şimdi renklendirme ve düzenleme aşamasına geçelim ilk olarak boy kısmına 3 tabe class ekliyelim
<body class="w-75 mx-auto my-4"> w-75 mx-auto my-4 classlarını ekliyelim
HTML:
<table class="table table-dark">
<thead>...</thead>
<tbody>...</tbody>
</table>ikiside ayrı ayrı
HTML:
<table class="table">
<thead class="table-dark>...</thead>
<tbody>...</tbody>
</table>
görsel de de gözüktüğü gibi ilk olarak tamamına verdik sonra da sadece thead kısmına verdik
istediğiniz gibi renklendire bilirsiniz
3 nokta koymamın sebebi gereksiz uzun olmamasıdır
gelin bide koyu açık koyu açık şeklinde yapalım en çok karşınıza çıka bilecek bir tablo çeşidi
<
HTML:
table class="table table-primary table-striped">
<thead class="table-dark>...</thead>
<tbody>...</tbody>
</table>
mavi renk olduğu için çok belli olmuyor ek olarak yanlarda da belirttim gelin bide bordered ekliyelim
HTML:
<table class="table table-dark table-bordered">
<thead class="table-dark>...</thead>
<tbody>...</tbody>
</table>hover olayı var gelin bide ona bakalım
HTML:
<table class="table table-dark table-bordered table-hover">
<thead class="table-dark>...</thead>
<tbody>...</tbody>
</table>
M= farenin olduğu yer
B= bordered
gelin birazcık tabloyu renklendirelim (hayal gücünüze kalmış)
HTML:
<table class="table table-dark">
<thead >
<tr class="table-danger">
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-primary">1</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr class="bg-success ">
<th>2</th>
<th>ddddd</th>
<th class="bg-primary tex-danger">Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr class="bg-warning">
<th>3</th>
<th>asdasd</th>
<th class="bg-secondary">Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>4</th>
<th>ffff</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
</tbody>
</table>
mantık aynı mantık o yüzden bir örnek üzerinden gösterdim
belki tablomuzda bazı yerler uzun gelin bide scrol ekleyelim div içerisine alıyoruz table muzu
HTML:
<div class="table-responsive">
<table class="table table-dark table-bordered">
<thead >
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
<th>Ersse</th>
<th>[email protected]</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
<th>Ersse</th>
<th>Ar-Ge</th>
</tr>
<tr>
<th>2</th>
<th>ddddd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>3</th>
<th>asdasd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>4</th>
<th>ffff</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
<th>4</th>
<th>ffff</th>
</tr>
</tbody>
</table>
</div>
görseldeki gibi bir sonuç çıkacaktır bende hatalı çıktı
bir sonraki konuda görüşmek üzere bir sonraki konu içeriği Listeler
iyi forumlar
Not: Bootstrap dersleri BTK Akademiden yardım alınarak hazırlanmakta
Projedeki Bütün kodlar
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<! CSS >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>www.TürkHackTeam.org/com</title>
<style>
</style>
</head>
<body class="w-75 mx-auto my-4">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>2</th>
<th>ddddd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>3</th>
<th>asdasd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>4</th>
<th>ffff</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
</tbody>
</table>
<br><br>
<table class="table table-dark">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>2</th>
<th>ddddd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>3</th>
<th>asdasd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>4</th>
<th>ffff</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
</tbody>
</table>
<br><br>
<br><br>
<table class="table">
<thead class="table-dark">
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>2</th>
<th>ddddd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>3</th>
<th>asdasd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>4</th>
<th>ffff</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
</tbody>
</table>
<br><br>
<br><br>
<table class="table table-primary table-striped">
<thead >
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>2</th>
<th>ddddd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>3</th>
<th>asdasd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>4</th>
<th>ffff</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
</tbody>
</table>
<br><br>
<br><br>
<table class="table table-dark table-bordered table-hover">
<thead >
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>2</th>
<th>ddddd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>3</th>
<th>asdasd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>4</th>
<th>ffff</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
</tbody>
</table>
<br><br>
<table class="table table-dark">
<thead >
<tr class="table-danger">
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-primary">1</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr class="bg-success ">
<th>2</th>
<th>ddddd</th>
<th class="bg-primary tex-danger">Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr class="bg-warning">
<th>3</th>
<th>asdasd</th>
<th class="bg-secondary">Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>4</th>
<th>ffff</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
</tbody>
</table>
<br><br>
<div class="table-responsive">
<table class="table table-dark table-bordered">
<thead >
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
<th>Ersse</th>
<th>[email protected]</th>
<th>Ersse</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
<th>Ersse</th>
<th>Ar-Ge</th>
</tr>
<tr>
<th>2</th>
<th>ddddd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>3</th>
<th>asdasd</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
</tr>
<tr>
<th>4</th>
<th>ffff</th>
<th>Ar-Ge</th>
<th>[email protected]</th>
<th>4</th>
<th>ffff</th>
</tr>
</tbody>
</table>
</div>
<br><br>
<br><br>
<br><br>
<! JS >
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Son düzenleme:
