Tables ใน
Bootstrap 4 มีช่องแบ่งตามแนวตั้งและช่องแบ่งตามแนวนอน โดยมีรูปแบบที่หลากหลายมาก ไปดูตัวอย่างกันเลย
ตัวอย่างการใช้ 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>
ผลลัพธ์
ตัวอย่างการใช้ Class .table-bordered
โค้ด: เลือกทั้งหมด
<!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>
ผลลัพธ์
ตัวอย่างการใช้ Class .table-hover
โค้ด: เลือกทั้งหมด
<!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>
ผลลัพธ์
ตัวอย่างการใช้ Class .table-dark
โค้ด: เลือกทั้งหมด
<!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>
ผลลัพธ์
ตัวอย่างการใช้ Class .table-dark คู่กับ Class .table-striped
โค้ด: เลือกทั้งหมด
<!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>
ผลลัพธ์
อ้างอิง :
https://www.w3schools.com/bootstrap4/bo ... tables.asp
[b][color=#FF0080][size=150]Tables[/size][/color][/b] ใน [url=https://www.mindphp.com/forums/viewforum.php?f=76]Bootstrap[/url] 4 มีช่องแบ่งตามแนวตั้งและช่องแบ่งตามแนวนอน โดยมีรูปแบบที่หลากหลายมาก ไปดูตัวอย่างกันเลย
[color=#FF0000][b]ตัวอย่างการใช้ Class ".table-striped"[/b][/color]
[code]<!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>[/code]
[b][color=#FF0000]ผลลัพธ์[/color][/b]
[attachment=4]c1.JPG[/attachment]
[b][color=#FF0000]ตัวอย่างการใช้ Class .table-bordered[/color][/b]
[code]<!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>[/code]
ผลลัพธ์
[attachment=3]c2.JPG[/attachment]
[b][color=#FF0000]ตัวอย่างการใช้ Class .table-hover[/color][/b]
[code]<!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>[/code]
[color=#FF0000][b]ผลลัพธ์[/b][/color]
[attachment=2]c3.JPG[/attachment]
[b][color=#FF0000]ตัวอย่างการใช้ Class .table-dark[/color][/b]
[code]<!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>[/code]
[b][color=#FF0000]ผลลัพธ์[/color][/b]
[attachment=1]c4.JPG[/attachment]
[b][color=#FF0000]ตัวอย่างการใช้ Class .table-dark คู่กับ Class .table-striped[/color][/b]
[code]<!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>[/code]
[b][color=#FF0000]ผลลัพธ์[/color][/b]
[attachment=0]c5.JPG[/attachment]
[b]อ้างอิง[/b] : [url]https://www.w3schools.com/bootstrap4/bootstrap_tables.asp[/url]