جدول ها در زبان HTML

با سلام و عرض ادب خدمت همراهان روکسو، در این جلسه قصد داریم در رابطه با جدول ها یا همان Tables در زبان HTML صحبت کنیم و از ویژگی ها و نحوه ی تعریفشان نکاتی را متذکر شویم.

جدول ها

Country	Contact	Company
Germany	Maria Anders	Alfreds Futterkiste
Mexico	Francisco Chang	Centro comercial Moctezuma
Austria	Roland Mendel	Ernst Handel
UK	Helen Bennett	Island Trading
Canada	Yoshi Tannamuri	Laughing Bacchus Winecellars
Italy	Giovanni Rovelli	Magazzini Alimentari Riuniti

جدولی که در بالا می بینید نمونه ای از جدول در زبان HTML است، البته جدول های HTML به دلیل وجود زبان CSS می توانند ظاهر بسیار متفاوتی داشته باشند و بستگی به کدهای CSS شما دارند.

هدف از ساخت جدول به کار و سلیقه ی شما بستگی دارد اما سعی کنید زمانی از جدول ها استفاده کنید که داده های جدولی داشته باشید! برخی از برنامه نویسان وب با تصور اشتباه اینکه هر جدولی به هر صفحه ای زیبایی می دهد بی جا و بدون دلیل از جدول ها استفاده می کنند. با اینکه احتمال ضربه زدن به سئو از طریق این کار تقریبا صفر است اما برای ظاهر وب سایت شما خوب نیست. برخی داده ها به صورت گروهی هستند و یا به هر دلیل دیگر مستقیما در یک جدول جا می گیرند؛ در آن زمان می توانید از جدول ها استفاده کنید.

برای ساختن جدول ها از تگ <table> استفاده می کنیم. این تگ به مرورگر اعلام می کند ما قصد ساخت یک جدول را داریم. سپس در داخل این تگ، برای هر ردیف از جدول‌تان باید از تگ <tr> استفاده کنید که مخفف table row (ردیف جدول) است. اگر ردیف اول شما دارای عنوان برای داده ها است و می خواهید پر رنگ تر باشد باید درون <tr> اول، از تگ <th> استفاده کنید. حالا برای هر خانه ی جدول باید از تگ <td> (مخفف table data) استفاده کنید.

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

<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

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

نکته:ها به طور پیش فرض به صورت Bold (پررنگ) و centered (وسط چین) هستند، به همین دلیل خروجی را به این شکل مشاهده می کنید.

باید بدانید <td> ها که خانه های جدول شما را می سازند می توانند هر عنصر HTML ای مانند تصویر، لیست، متن و ... را در خود نگه دارند.

حاشیه در جدول

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

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

<h2>Bordered Table</h2>
<p>Use the CSS border property to add a border to the table.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

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

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

اگر بخواهیم خاصیت دو خطی بودن حاشیه را حذف کنیم می توانیم از دستور border-collapse در زبان CSS استفاده کنیم:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

اگر این کار را بکنید کد بالا به این شکل در می آید.

اضافه کردن Padding

padding در هر خانه ی جدول، فضایی خالی را بین داده های جدول و حاشیه های آن مشخص می کند. در حالت پیش فرض خانه های جدول ها در HTML هیچ padding ای ندارند. بیایید به جدول خودمان padding اضافه کنیم تا متوجه تغییر آن بشویم:

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

<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p dir='rtl'>سعی کنید مقدار padding را به 5 پیکسل تغییر دهید.</p>

</body>
</html>

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

همانطور که در جدول می بینید، خانه های آن بسیار بزرگتر شده اند که نتیجه ی ایجاد padding است.

خصوصیت های border-spacing و text-align

در ضمن همانطور که گفتیم <th> ها به طور پیش فرض به صورت Bold (پررنگ) و centered (وسط چین) هستند اما اگر بخواهیم آن ها را سر جایشان برگردانیم چه کار کنیم؟ می توانیم از text-align استفاده کنیم. این خصوصیت CSS به ما اجازه می دهد راست چین، چپ چین و وسط چین بودن داده های جدول را تعیین کنیم. به طور مثال می خواهیم <th> ها را به سمت چپ ببریم بنابراین کد زیر را به استایل ها اضافه می کنیم:

th {
  text-align: left;
}

با اضافه کردن این کد، جدول ما به این شکل در می آید (تمام داده ها به سمت چپ می روند).

توجه: در صورتیکه به CSS آشنایی ندارید می توانید دوره زیر را که به صورت رایگان ارائه شده است، مطالعه بفرمایید:

آموزش CSS (مقدماتی تا پیشرفته)

از طرفی خصوصیتی به نام border-spacing وجود دارد که مانند نامش، کارش ایجاد فاصله بین حاشیه های خانه های جدول است. بیایید مثالی از آن را ببینیم:

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

  <h2>Border Spacing</h2>
  <p>Border spacing specifies the space between the cells.</p>

  <table style="width:100%">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </table>

  <p dir='rtl'>  مقدار فاصله را به 5 پیکسل تغییر دهید و خروجی را دوباره مشاهده کنید.</p>

  </body>
  </html>

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

نکته: اگر حاشیه های جدول شما دارای border-collapse باشند، دستور border-spacing کار نکرده و هیچ تاثیری روی آن ها ندارد. چرا؟ چون گفته نباید حاشیه های دو خطی داشته باشیم (حاشیه های تک خطی) و یک خط هم نمی تواند از خودش فاصله بگیرد! چطور می شود از نظر منطقی یک شیء از خودش فاصله بگیرد؟!

خانه های مشترک

حتما شما هم دیده اید که برخی از جدول ها طوری طراحی شده اند که یک خانه متعلق به دو یا چند ستون است و به عبارتی بین آنها مشترک است. این اتفاق معمولا به این دلیل می افتد که مقدار آن خانه مساوی و یا مرتبط به هر دو ستون است. برای ایجاد این نوع خانه ها باید از یک attribute به نام colspan استفاده کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans two columns</h2>
<p>To make a cell span more than one column, use the colspan attribute.</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

</body>
</html>

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

در مثال بالا از آن جایی که شماره تلفن خانه و شماره تلفن همراه هر دو زیر مجموعه ی شماره تلفن یا Telephone قرار می گیرند می توانیم آن ها را ادغام کنیم.

حالت دیگر این است که یک خانه از جدول، شامل چندین ردیف شود. در این حالت از attribute دیگری به نام rowspan استفاده می کنیم. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans two rows</h2>
<p>To make a cell span more than one row, use the rowspan attribute.</p>

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

</body>
</html>

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

در اینجا هم همان بحث شماره تلفن پیش می آید اما طراحی جدول به طوری است که داده ها به صورت ستونی دریافت می شوند بنابراین می توانیم به این شکل آن ها را به هم مرتبط کنیم.

تگ <caption>

تگ <caption> به معنی «زیرنویس» یا «توضیحات» است و آن را می توانید به جدول هایتان اضافه کنید تا توضیح مختصری را به مخاطب ارائه دهید. به طور مثال:

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

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

Monthly savings (به معنی «پس اندازهای ماهانه») توضیح این جدول است و مخاطب را سریعا با محتوای آن آشنا می کند.

نکته: تگ <caption> باید بلافاصله بعد از تگ <table> نوشته شود.

سوال: اگر چندین جدول داشته باشیم اما بخواهیم هر کدام را به شکلی خاص استایل دهی کنیم چطور؟

پاسخ: این سوال در دوره ی CSS پاسخ داده شده است. می توانید برای جدول یک id خاص تعیین کنید و در زمان استایل دهی با CSS فقط آن id را هدف بگیرید. یک مثال را در این لینک برایتان نوشته ام.

از آنجا که این دوره مربوط به HTML است همین مقدار برایتان کافی است و از نظر HTML شما را با جدول ها آشنا کرد. بحث استایل دهی جدول ها مربوط به دوره ی CSS می شود. به طور مثال یک جدول را به شکل چشم نواز تری استایل دهی کرده ایم و برایتان آورده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width:100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
 background-color: #fff;
}
table#t01 th {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<br>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

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

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