در خدمت شما هستیم با آموزش Bootstrap 4 جلسه ششم (table)
آموزش Bootstrap 4 جلسه ششم (table) از سری آموزش های تک قسمتی است.
ساخت جدول پایه
همانطور که میدانید جداول یکی از مهمترین ارکان محتوا و سایت هستند که اطلاعات دسته بندی شده ای را به ما میدهند. در ابتدا سایت ها را با table طراحی میکردند و به مرور زمان div جای آن را گرفت اما هنوز هم برای موارد مختلف از جداول استفاده میکنند. جالب است بدانید سایت هایی که دارای جداولی هستند که مرتب آپدیت میشود بسیار مورد توجه گوگل هستند.بوت استرپ هم از این موضوع غافل نشده است و کلاس های بسیار مفید و متنوعی را برای جدول ساخته است که در این آموزش به آنها میپردازیم.
اولین جدول که بوت استرپ به آن پرداخته است جدول پایه یا همان حالت پیشفرض است. در این حالت کافیست شما در داخل تگ table کلاس table نیز استفاده کنید. این جدول با جدول هایی که شما به صورت عادی میسازید تفاوتی ندارد و در عملکرد مشابه آنها است نمونه زیر مثال عملی این حالت است:
<table class=”table”> </table>
جداول راه راه (zebra)
در اکثر موارد وقتی تعداد سطر و ستون های جداول زیاد میشود خواندن آنها نیز سخت شده و نیاز به دقت بالایی دارد به این صورت که ممکن است اطلاعات سطر بالا یا پایین به اشتباه خوانده شود معمولا در این حالت کاربر با نگه داشتن کلیک موس آن قسمت را هایلایت میکند تا بتواند بخواند بوت استرپ برای رفع این مشکل و خوانایی جداول کلاس table-striped را ساخته است عملکرد این کلاس به این گونه است که سطر های جدول را یکی درمیان کمرنگ و پر رنگ میکند تا خواندن آن ساده شود.برای این کار کافیست کلاس table-striped را به تگ table بدهید به صورت زیر:
<table class=”table table-striped”> </table>
خطوط حاشیه جدول
در حالت پیشفرض دور جدول کادری نیست و بین ستون هم خط جدا کننده ای وجود ندارد تنها بین سطر ها خطی کشیده شده است اگر شما بخواهید برای سطر و ستون و دور جدول خود اصطلاحا border بگذارید بوت استرپ به کمک شما می آید درست است بوت استرپ برای این حالت نیز کلاسی دارد کافیست کلاس table-bordered را به تگ table خود اضافه کنید به صورت زیر:
<table class=”table table-bordered“> </table>
نکته: در تمام موارد گفته شده کلاس table ثابت است و شما باید کلاس های دیگر را به آن اضافه کنید.
تغییر حالت سطر ها با hover شدن موس
بوت استرپ تنها به خوانایی به حالت zebra اکتفا نکرده است و حالت hover را نیز برای شما ایجاد کرده است به این صورت که با رفتن موس روی هر سطر رنگ آن سطر نسبت به باقی سطر ها متمایز میشود. اگر میخواهید این حالت را در جداول خود به وجود بیاورید کافیست از کلاس table-hover استفاده و این کلاس را به تگ table خود اضافه کنید مانند کد زیر:
<table class=”table table-hover“> </table>
جداول با رنگ تیره (Black/Dark Table)
اگر تصویر زمینه سایت شما رنگ های روشن است و میخواهید جداولی با رنگ معکوس داشته باشید این نوع جدول برای شما مناسب است یا حتی زمینه سایت شما مشکی است و میخواهید جدول هایی همرنگ و متناسب داشته باشید باز هم میتوانید از کلاس table-dark در تگ table خود استفاده کنید و جدول های خود را به رنگ تیره بسازید مانند کد زیر:
<table class=”table table-dark“> </table>
جدوال تیره راه راه (Dark Zebra)
درباره جداول zebra بالاتر صحبت کردیم شما میتوانید این حالت نمایش را در جدول های تیره نیز داشته باشید. تنها کاری که باید انجام دهید این است که چند کلاس را در کنار هم قرار دهید کلاس table که لازمه کار است کلاس table-dark برای تیره شدن جدول و کلاس table-striped برای راه راه شدن جدول. به کمک این ۳ کلاس میتوانید جدول های تیره راه راه داشته باشید مانند کد زیر:
<table class=”table table-dark table-striped“> </table>
تغییر حالت سطر جداول تیره با hover شدن موس
اگر خاطرتان باشد بالاتر کلاس table-hover که کمک میکرد با قرار گرفتن موس روی سطری رنگ آن تغییر کند این حالت برای جداول تیره نیز امکان پیاده سازی دارد کافیست مجددا ۳ کلاس را در کنار هم تعریف کنید کلاس table کلاس table-dark و کلاس table-hover مانند مثال زیر میتوانید این کار را انجام دهید:
<table class=”table table-dark table-hover“> </table>
جدول بدون کادر (borderless)
اگر میخواهید جداول شما هیچ حاشیه و کادری نداشته باشند تنها کافیست از کلاس table-borderless استفاده کنید تا تمام خطوط پاک شوند و هیچ کادری باقی نماند اگر قصد انجام این کار را دارید مشابه کد زیر عمل کنید
<table class=”table table-borderless”> </table>
جدول های رنگی
اگر آموزش جلسه قبل را دیده باشید میدانید که بوت استرپ رنگ های مختلفی را برای نوشته و پس زمینه در کلاس های خود جای داده است. علاوه بر پس زمینه و نوشته این امکان برای جداول هم وجود دارد کافیست کلاس رنگی مد نظر که پایین تر برای شما لیست میکنیم را در جایی که میخواهید رنگ تغییر کند قرار دهید اگر این کلاس ها را در تگ table قرار دهید کل جدول رنگ میگیرد اگر در tr قرار دهید تنها آن سطر رنگ میگیرد و اگر در th قرار دهید تنها آن سلول رنگ میگیرد:
- table-primary : به کمک این کلاس میتوانید رنگ آبی اضافه کنید.
- table-success : به کمک این کلاس میتوانید رنگ سبز اضافه کنید.
- table-danger : به کمک این کلاس میتوانید رنگ قرمز اضافه کنید.
- table-info : به کمک این کلاس میتوانید رنگ آبی کمرنگ اضافه کنید
- table-warning : به کمک این کلاس میتوانید رنگ نارنجی اضافه کنید.
- table-active : به کمک این کلاس میتوانید حالت فعال که رنگ طوسی دارد اضافه کنید.
- table-secondary : به کمک این کلاس میتوانید رنگ کلاس ثانویه که خاکستری است اضافه کنید.
- table-light : به کمک این کلاس میتوانید رنگ آبی مایل به سفید اضافه کنید.
- table-dark : به کمک این کلاس میتوانید رنگ مشکی اضافه کنید.
برای مشخص شدن موضوع در پایان مقاله کدی حاوی کل مطالب گفته شده قرار میدهیم.
رنگ هدر جدول
شما برای هدر جداول خود میتوانید از ۲ کلاس thead-light و thead-dark استفاده کنید دقت کنید این کلاس ها را باید به تگ thead بدهید از نام کلاس ها مشخص است یکی هدر تیره و دیگری هدر روشن میسازد.
ساخت جدول کوچک
تا الان تمام جدول هایی که گفتیم جدول بزرگ بودند بزرگ به این معنی که حاشیه ای از داخل داشتند اگر این حاشیه برای شما زیاد است و نمیخواهید وجود داشته باشد کافیست از کلاس table-sm استفاده کنید و این حاشیه ها را از بین ببرید مانند کد زیر
<table class=”table table-sm”> </table>
جداول رسپانسیو
به عنوان آخرین مورد میپردازیم به جدول های رسپانسیو اگر قصد ساخت جداول رسپانسیو را دارید باید از کلاس هایی مشابه col ها استفاده کنید اگر خاطرتان باشد ما برای صفحه دکستاپ معمولی از col-md استفاده میکردیم حال به جای col باید از table-responsive استفاده کنید که میشود table-responsive-md نکته ای که باید به آن توجه کنید این است که این کلاس باید در div قرار بگیرید و کل جدول شما داخل این div قرار بگیرد کلاس های مختلف رسپانسیو و اندازه های آن ها را برای شما لیست میکنیم:
- table-responsive-sm : این کلاس برای صفحه نمایش های کوچکتر از ۵۷۶px استفاده میشود.
- table-responsive-md : برای صفحه نمایش های بین ۵۷۷px تا ۷۶۸px مناسب است.
- table-responsive-lg : برای صفحه نمایش های بین ۷۶۹px تا ۹۹۲px مناسب است
- table-responsive-xl : برای صفحه نمایش های ۱۲۰۰px به بالا مناسب است.
برای واضح شدن کدی حاوی کل مطالب آموزشی این جلسه را برای شما قرار میدهیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 | <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</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.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> --------------------------------------------------------------------------------- <div class="container"> <h2>Striped Rows</h2> <p>The .table-striped class adds zebra-stripes to a table:</p> <table class="table table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> --------------------------------------------------------------------------------- <div class="container"> <h2>Bordered Table</h2> <p>The .table-bordered class adds borders on all sides of the table and the cells:</p> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> --------------------------------------------------------------------------------- <div class="container"> <h2>Hover Rows</h2> <p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p> <table class="table table-hover"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> --------------------------------------------------------------------------------- <div class="container"> <h2>Black/Dark Table</h2> <p>The .table-dark class adds a black background to the table:</p> <table class="table table-dark"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> --------------------------------------------------------------------------------- <div class="container"> <h2>Dark Striped Table</h2> <p>Combine .table-dark and .table-striped to create a dark, striped table:</p> <table class="table table-dark table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> --------------------------------------------------------------------------------- <div class="container"> <h2>Hoverable Dark Table</h2> <p>The .table-hover class adds a hover effect (grey background color) on table rows:</p> <table class="table table-dark table-hover"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> --------------------------------------------------------------------------------- <div class="container"> <h2>Borderless Table</h2> <p>The .table-borderless class removes borders from the table:</p> <table class="table table-borderless"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> --------------------------------------------------------------------------------- <div class="container"> <h2>Contextual Classes</h2> <p>Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Default</td> <td>Defaultson</td> <td>def@somemail.com</td> </tr> <tr class="table-primary"> <td>Primary</td> <td>Joe</td> <td>joe@example.com</td> </tr> <tr class="table-success"> <td>Success</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr class="table-danger"> <td>Danger</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr class="table-info"> <td>Info</td> <td>Dooley</td> <td>july@example.com</td> </tr> <tr class="table-warning"> <td>Warning</td> <td>Refs</td> <td>bo@example.com</td> </tr> <tr class="table-active"> <td>Active</td> <td>Activeson</td> <td>act@example.com</td> </tr> <tr class="table-secondary"> <td>Secondary</td> <td>Secondson</td> <td>sec@example.com</td> </tr> <tr class="table-light"> <td>Light</td> <td>Angie</td> <td>angie@example.com</td> </tr> <tr class="table-dark text-dark"> <td>Dark</td> <td>Bo</td> <td>bo@example.com</td> </tr> </tbody> </table> </div> --------------------------------------------------------------------------------- <div class="container"> <h2>Table Head Colors</h2> <p>The .thead-dark class adds a black background to table headers, and the .thead-light class adds a grey background to table headers:</p> <table class="table"> <thead class="thead-dark"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> <table class="table"> <thead class="thead-light"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> --------------------------------------------------------------------------------- <div class="container"> <h2>Small Table</h2> <p>The .table-sm class makes the table smaller by cutting cell padding in half:</p> <table class="table table-bordered table-sm"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> --------------------------------------------------------------------------------- <div class="container"> <h2>Responsive Table</h2> <p>The .table-responsive class creates a responsive table which will scroll horizontally on screens that are less than 992px wide (if needed). When viewing on anything larger than 992px, there is no difference:</p> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>City</th> <th>Country</th> <th>Sex</th> <th>Example</th> <th>Example</th> <th>Example</th> <th>Example</th> <th>Example</th> <th>Example</th> <th>Example</th> <th>Example</th> <th>Example</th> <th>Example</th> <th>Example</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Anna</td> <td>Pitt</td> <td>35</td> <td>New York</td> <td>USA</td> <td>Female</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> --------------------------------------------------------------------------------- <div class="container"> <h2>Responsive Table</h2> <p>The .table-responsive-sm class creates a responsive table which will scroll horizontally on screens that are less than 576px wide.</p> <p>Resize the browser window to see the effect.</p> <div class="table-responsive-md"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>City</th> <th>Country</th> <th>Sex</th> <th>Example</th> <th>Example</th> <th>Example</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Anna</td> <td>Pitt</td> <td>35</td> <td>New York</td> <td>USA</td> <td>Female</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> ----------------------------------------------------------------------- </body> </html> |
آموزش Bootstrap 4 جلسه ششم (table) در اینجا به پایان میرسد امیدواریم این آموزش برای شما مفید بوده باشد.
می توانید دیگر قسمت ها را در لینک زیر ببینید:
آموزش Bootstrap 4 جلسه پنجم (color)
آموزش Bootstrap 4 جلسه هفتم (تصویر)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید
(2 رای, میانگین: 5٫00 امتیاز از 5)
Loading...