استایل دهی جداول در CSS

ظاهر پیش فرض جدول ها در HTML مانند بقیه ی عناصر چندان جذاب نیست و برای وب سایت های مدرن دیگر جواب نمی دهد. خبر خوش آنجاست که شما می توانید با تنها چند خط CSS ظاهر این جداول را کاملا قابل قبول کنید.

به مثال زیر نگاهی بیندازید:

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</table>

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که می بینید تنها با چند خط کوچک CSS ظاهر کاملا قابل قبولی به جدول خود داده ایم. اگر همان چند خط CSS را حذف کنیم جدول ما به این شکل تبدیل می شود که برای کاربر امروزی فاجعه ای بیش نیست.

در جلسه ی امروز می خواهیم با انواع روش های تزئین و استایل دهی جدول ها آشنا شویم. باید ابتدا به سراغ حاشیه ها برویم.

border در جدول ها

برای تعیین حاشیه و خط های یک جدول از خاصیت border در زبان CSS استفاده می کنیم.

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

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Add a border to a table:</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

مشاهده ی خروجی در JSBin

شکل جدول خروجی ما:

سوال: چرا در مثال بالا جدول ما خط های دو تایی دارد؟ برای رفع آن چه کاری می توانیم انجام دهیم؟

پاسخ: اگر به قسمت CSS کد بالا نگاه کنید متوجه می شوید که ما برای هر سه قسمت جدول (یعنی table, th, td) حاشیه تعریف کرده ایم! بنابراین هر کدام جداگانه حاشیه ی خود را می گیرد و شکل بالا ایجاد می شود. تصور کنید کد CSS بالا را به این شکل بنویسیم:

<style>
table {
  border: 1px solid black;
}
</style>

در این صورت جدول ما به این شکل در خواهد آمد.

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

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}

table, td, th {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Let the borders collapse:</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<p dir='rtl'><b>Note:</b> اگر مقدار DOCTYPE! مشخص نشده باشد این دستور می تواند نتایج ناخواسته ای را در مرورگر اینترنت اکسپلورر 8 و پایین تر ایجاد کند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: اگر مقدار DOCTYPE! مشخص نشده باشد این دستور می تواند نتایج ناخواسته ای را در مرورگر اینترنت اکسپلورر 8 و پایین تر ایجاد کند.

طول و عرض جدول

اگر دوست داشته باشید که جدول شما طول یا عرض مشخصی داشته باشد می توانید با استفاده از خصوصیات width و height آن را مشخص کنید. به طور مثال در کد زیر گفته ایم که جدول ما باید عرض %100 داشته باشد (یعنی تمام عرض صفحه را بگیرد) و همچنین به <th> ها نیز ارتفاع 50 پیکسلی داده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 50px;
}
</style>
</head>
<body>

<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر به کد بالا دقت کنید متوجه می شوید که نوشته های داخل جدول با یکدیگر هماهنگ نیستند و در یک موقعیت مکانی قرار ندارند. اگر بخواهیم آن ها را ترازبندی کنیم چه کاری میتوان کرد؟

هم ترازی داده های جدول

برای هم تراز کردن نوشته های یک جدول به صورت افقی می توانیم از دستور text-align استفاده کنیم. حالت پیش فرض جدول ها برای <th> مقدار center (به معنی «وسط») و برای <td> ها مقدار left (به معنی «چپ») است اما ما می توانیم به راحتی آن را تغییر دهیم:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
}
</style>
</head>
<body>

<h2>The text-align Property</h2>
<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td:</p>

<table>
  <tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Savings</th>
  </tr>
  <tr>
  <td>Peter</td>
  <td>Griffin</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Lois</td>
  <td>Griffin</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Joe</td>
  <td>Swanson</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>$250</td>
</tr>
</table>

</body>
</html>

مشاهده ی خروجی در JSBin

در این مثال به راحتی <th> ها را نیز چپ چین کرده ایم.

اما برای هم تراز کردن این داده ها به صورت عمودی باید از دستور vertical-align استفاده کنیم. مقادیر قابل قبول برای این دستور top به معنی «بالا» و bottom به معنی «پایین» و middle به معنی «میانه» یا «وسط» هستند.

حالت پیش فرض جدول ها هم برای <th> و هم برای <td> ها مقدار middle (به معنی «میانه») است. ما در مثال زیر می خواهیم <td> را به صورت bottom قرار دهیم:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  height: 50px;
  vertical-align: bottom;
}
</style>
</head>
<body>

<h2>The vertical-align Property</h2>
<p>This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.</p>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

مشاهده ی خروجی در JSBin

توجه داشته باشید که این تمرینات جهت یادگیری و آموزش است و هیچکدام از نظر ظاهری برای وب سایت واقعی جذاب نیست. در آخر این مقاله یک یا چند مثال از جدول های بسیار زیبای CSS را برایتان می آوریم.

سوال: داده های جدول ما به حاشیه اش چسبیده اند. آیا راهی برای فاصله انداختن بین آن ها وجود دارد؟

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

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {  
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 15px;
}
</style>
</head>
<body>

<h2>The padding Property</h2>
<p>This property adds space between the border and the content in a table.</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که میبینید ظاهر جدول ما بسیار زیبا تر شده است.

جدول های مدرن تر

جدول های ساده کم کم دارند بساط خود را از دنیای امروزی وب جمع می کنند و طراحان مطرح دنیا از شیوه های جدیدی برای استایل دهی به جدول ها استفاده می کنند. به طور مثال می توانیم برای ردیف های جدول فقط حاشیه ی زیرین (یعنی border-bottom) قرار دهیم:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>

<h2>Bordered Table Dividers</h2>
<p>Add the border-bottom property to th and td for horizontal dividers:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

مشاهده ی خروجی در JSBin

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

به کد زیر نگاه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}
</style>
</head>
<body>

<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر موس خود را روی ردیف های این جدول ببرید، این ردیف ها تیره تر می شوند و علاوه بر خوانا تر شدن جدول، کاربر احساس می کند که با جدول و عناصر صفحه ی ما تعامل دارد! به هر حال اگر برای شما تنها خوانایی جدول مهم است اما دوست نداربد از این حالت استفاده کنید می توانید از دستور ()nth-child بهره ببرید:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h2>Striped Table</h2>
<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:</p>

<table>
  <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
  </tr>
  <tr>
  <td>Peter</td>
  <td>Griffin</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Lois</td>
  <td>Griffin</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Joe</td>
  <td>Swanson</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>$250</td>
  </tr>
</table>

</body>
</html>

مشاهده ی خروجی در JSBin

ما در این مثال با استفاده از background-color و ترکیب آن با دستور ()nth-child جدول خود را شبیه جداول اداری کرده ایم تا خوانایی آن بیشتر شود. حالا اگر کمی رنگ نیز به این جدول بدهیم، بهتر می شود:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<h2>Colored Table Header</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

مشاهده ی خروجی در JSBin

حالا ظاهر بسیار بهتری پیدا کرد.

جدول های واکنش گرا

این نوع جداول با کم و زیاد شدن عرض صفحه (نمایش در موبایل های هوشمند یا کامپویتر و ....) به هم نمیریزند و از کادر هم خارج نمی شوند. برای ساخت این جدول ها باید به عنصر نگه دارنده ی جدول خصوصیت overflow-x:auto را بدهیم:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h2>Responsive Table</h2>
<p>A responsive table will display a horizontal scroll bar if the screen is too 
small to display the full content. Resize the browser window to see the effect:</p>
<p>To create a responsive table, add a container element (like div) with <strong>overflow-x:auto</strong> around the table element:</p>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

به صفحه ی خروجی کد بالا بروید و سعی کنید اندازه ی قسمت خروجی و یا پنجره ی مرورگر خود را کوچک کنید. متوجه می شوید که جدول به جای به هم ریختن، اسکرول می گیرد و کاربر می تواند به راحتی محتوای آن را مشاهده کند.

نکته: اسکرول ها در OS X (سیستم های مک) مخفی هستند حتی اگر overflow:scroll نیز تعیین شده باشد اما از نظر کارکرد مشکلی ندارند و به خوبی کار می کنند.

اگر خلاقیت بیشتری به خرج دهید می توانید جداولی مانند این جدول نیز بسازید. به هر حال امیدوارم از این قسمت لذت برده باشید.