ตัวอย่างการใช้ Class ".table-striped"
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<title>ตัวอย่างการใช้ Class ".table-striped"</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ตัวอย่างการใช้ Class ".table-striped"</h2>
<p>รูปแบบตารางที่ใช้ .table-striped:</p>
<table class="table table-striped">
<thead>
<tr>
<th>ชื่อ</th>
<th>สกุล</th>
<th>อีเมล์</th>
</tr>
</thead>
<tbody>
<tr>
<td>ดำ</td>
<td>แดง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ขาว</td>
<td>เขียว</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ชมพู</td>
<td>ฟ้า</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<title>ตัวอย่างการใช้ Class ".table-bordered</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ตัวอย่างการใช้ Class ".table-bordered"</h2>
<p>รูปแบบตารางที่ใช้ .table-bordered:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>ชื่อ</th>
<th>สกุล</th>
<th>อีเมล์</th>
</tr>
</thead>
<tbody>
<tr>
<td>ดำ</td>
<td>แดง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ขาว</td>
<td>เขียว</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ชมพู</td>
<td>ฟ้า</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<title>ตัวอย่างการใช้ Class ".table-hover</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ตัวอย่างการใช้ Class ".table-hover"</h2>
<p>รูปแบบตารางที่ใช้ .table-hover:</p>
<table class="table table-dark table-hover">
<thead>
<tr>
<th>ชื่อ</th>
<th>สกุล</th>
<th>อีเมล์</th>
</tr>
</thead>
<tbody>
<tr>
<td>ดำ</td>
<td>แดง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ขาว</td>
<td>เขียว</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ชมพู</td>
<td>ฟ้า</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<title>ตัวอย่างการใช้ Class ".table-dark</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ตัวอย่างการใช้ Class ".table-dark"</h2>
<p>รูปแบบตารางที่ใช้ .table-dark:</p>
<table class="table table-dark">
<thead>
<tr>
<th>ชื่อ</th>
<th>สกุล</th>
<th>อีเมล์</th>
</tr>
</thead>
<tbody>
<tr>
<td>ดำ</td>
<td>แดง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ขาว</td>
<td>เขียว</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ชมพู</td>
<td>ฟ้า</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<title>ตัวอย่างการใช้ Class ".table-dark คู่กับ Class .table-striped"</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ตัวอย่างการใช้ Class ".table-dark คู่กับ Class .table-striped"</h2>
<p>รูปแบบตารางที่ใช้ .table-dark คู่กับ .table-striped:</p>
<table class="table table-dark table-striped">
<thead>
<tr>
<th>ชื่อ</th>
<th>สกุล</th>
<th>อีเมล์</th>
</tr>
</thead>
<tbody>
<tr>
<td>ดำ</td>
<td>แดง</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ขาว</td>
<td>เขียว</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ชมพู</td>
<td>ฟ้า</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>