استایل دهی به جداول در CSS - بررسی کامل با مثال

در جلسه یازدهم از این آموزش قصد داریم ، نحوه استایل دهی به جداول (table) را در CSS به شما آموزش دهیم. ویژگی هایی که در این آموزش قرار است که به آن ها پرداخته شود عبارتند از:

border-collapse
border-spacing
caption-side
empty-cells
table-layout

با ما همراه باشید تا در ادامه تمام این ویژگی های را به تفصیل همراه با مثال برای شما توضیح دهیم.

1. نحوه استفاده از ویژگی border-collapse

هنگامی که در HTML جدول ترسیم می کنید و سپس برای سلول ها ، ردیف ها و خود جدول از ویژگی border استفاده می کنید حاشیه سلول ها و جدول هر کدام دارای خطوط جداگانه ای خواهند بود که چندان خوشایند نیست. برای اینکه خطوط حاشیه جدول و سلول ها را در قالب یک خط ترکیب شده ، استفاده کنیم ، از ویژگی border-collapse استفاده می کنیم. این ویژگی دو مقدار زیر را می پذیرد:

collapse : در اینصورت خطوط حاشیه جدول و سلول ها با هم ترکیب می شوند.
seprate : در اینصورت خطوط حاشیه جدول و سلول ها به صورت مجزا از هم نمایش داده می شوند.

حالا به مثال زیر توجه کنید:

<html>
   <head>   
      <style type="text/css">
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}
         td.a {
            border-style:dotted;
            border-width:3px;
            border-color:#000000; 
            padding: 10px;
         }
         td.b {
            border-style:solid;
            border-width:3px;
            border-color:#333333;
            padding:10px;
         }
      </style>      
   </head>
   <body>   
      <table class="one">
         <caption>Collapse Border Example</caption>
         <tr><td class="a"> Cell A Collapse Example</td></tr>
         <tr><td class="b"> Cell B Collapse Example</td></tr>
      </table>
      <br />      
      <table class="two">
         <caption>Separate Border Example</caption>
         <tr><td class="a"> Cell A Separate Example</td></tr>
         <tr><td class="b"> Cell B Separate Example</td></tr>
      </table>      
   </body>
</html>

حالا به نتیجه نگاه کنید:

همانطور که می بینید در جدول اول که برای آن مقدار border-collapse روی collapse قرار گرفته است خطوط حاشیه ها با هم ترکیب شده اند.

2. نحوه استفاده از ویژگی border-spacing

این ویژگی فاصله بین سلول های جدول را از طرفین مشخص می کند. برای این ویژگی به دو صورت می توانیم مقدار دهی کنیم.

در حالت اول یک مقدار فاصله برای تمامی جهات وارد می کنیم و در حالت دوم یک مقدار برای چپ و راست و مقداری دیگر برای بالا و پایین. برای فهم بهتر مطلب به مثال زیر توجه کنید:

<html>
   <head>   
      <style type="text/css">
         table.one {
            border-collapse:separate;
            width:400px;
            border-spacing:10px;
         }
         table.two {
            border-collapse:separate;
            width:400px;
            border-spacing:10px 50px;
         }
      </style>      
   </head>
   <body>   
      <table class="one" border="1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Collapse Example</td></tr>
         <tr><td> Cell B Collapse Example</td></tr>
      </table>
      <br />      
      <table class="two" border="1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Separate Example</td></tr>
         <tr><td> Cell B Separate Example</td></tr>
      </table>      
   </body>
</html>

نتیجه کد بالا را می توانید در ادامه مشاهده کنید:

3. نحوه استفاده از ویژگی caption-side :

با استفاده از این ویژگی محل قرار گیری تگ <caption> که درون تگ <table> قرار دارد مشخص می شود. برای مقدار دهی به این ویژگی می توان از یکی از مقادیر top ، bottom ، left یا right استفاده کرد. حالا به مثال زیر توجه کنید:

<html>
   <head>   
      <style type="text/css">
         caption.top {caption-side:top}
         caption.bottom {caption-side:bottom}
         caption.left {caption-side:left}
         caption.right {caption-side:right}
      </style>      
   </head>
   <body>   
      <table style="width:400px; border:1px solid black;">
         <caption class="top">
         This caption will appear at the top
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />      
      <table style="width:400px; border:1px solid black;">
         <caption class="bottom">
         This caption will appear at the bottom
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />      
      <table style="width:400px; border:1px solid black;">
         <caption class="left">
         This caption will appear at the left
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />      
      <table style="width:400px; border:1px solid black;">
         <caption class="right">
         This caption will appear at the right
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>      
   </body>
</html>

حالا به نتیجه توجه کنید:

4. نحوه کار با ویژگی empty-cells

با استفاده از این ویژگی مشخص می کنید که آیا خانه های خالی جدول و خطوط حاشیه آن ها نمایش داده شود یا خیر. به این ویژگی یکی از دو مقدار زیر را می توان اختصاص داد:

Show : این مقدار باعث می شود که خانه های خالی جدول و حاشیه هایشان نمایش داده شوند.
Hide : این ویژگی باعث می شود که خانه های خای جدول و حاشیه هایشان پنهان بمانند.

برای فهم بهتر مطالب به مثال بعد توجه کنید:

<html>
   <head>   
      <style type="text/css">
         table.empty{
            width:350px;
            border-collapse:separate;
            empty-cells:hide;
         }
         td.empty{
            padding:5px;
            border-style:solid;
            border-width:1px;
            border-color:#999999;
         }
      </style>      
   </head>
   <body>   
      <table class="empty">
      <tr>
         <th></th>
         <th>Title one</th>
         <th>Title two</th>
      </tr>      
      <tr>
         <th>Row Title</th>
         <td class="empty">value</td>
         <td class="empty">value</td>
      </tr>      
      <tr>
         <th>Row Title</th>
         <td class="empty">value</td>
         <td class="empty"></td>
      </tr>
      </table>
      
   </body>
</html>

حالا به نتیجه توجه کنید:

همانطور که می بینید چون برای empty-cells مقدار hide در نظر گرفته شده است سلولی از جدول که خالی است دیگر نشان داده نمی شود.

5. نحوه استفاده از ویژگی table-layout :

با استفاده از این ویژگی الگوریتم نمایش ظاهری جدول را مشخص می کنید. برای این ویژگی می توان یکی از دو مقدار auto یا fixed را استفاده کرد. در صورتی که برای آن از مقدار auto استفاده کنید عرض ستون ها متناسب با محتویات درونی آن ها تنظیم می شود. اما در صورتی که مقدار این ویژگی را بر روی fixed تنظیم کنید عرض جدول بر اساس مقادیر تعیین شده توسط کاربر تعیین خواهد شد. به مثال زیر توجه کنید:

<html>
   <head>
   
      <style type="text/css">
         table.auto {
            table-layout: auto
         }
         table.fixed{
            table-layout: fixed
         }
      </style>
      
   </head>
   <body>
   
      <table class="auto" border="1" width="100%">
      <tr>
         <td>1000000000000000000000000000</td>
         <td>10000000</td>
         <td>100</td>
      </tr>
      </table>
      <br />
      
      <table class="fixed" border="1" width="100%">
      <tr>
         <td width="20%">1000000000000000000000000000</td>
         <td width="40%">10000000</td>
         <td width="40%">100</td>
      </tr>
      </table>
      
   </body>
</html>

حالا نتیجه را ببینید:

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز