آموزش HTML - استایل‌دهی جدول

می‌توانید با استفاده از CSS، جدول‌های HTML را استایل‌دهی کنید. استایل‌دهی جدول به شما کمک می‌کند ظاهر پیش‌فرض عناصر جدول، مانند حاشیه‌ها، فاصله داخلی سلول‌ها، تراز متن، رنگ‌های پس‌زمینه و موارد دیگر را سفارشی کنید تا جدولی با قالب‌بندی مناسب در یک صفحه وب ایجاد کنید.

در ادامه، برخی از روش‌های استایل‌دهی جدول در HTML آورده شده‌اند:

• جدول با حاشیه‌های ادغام‌شده
• جدول با ردیف‌های راه‌راه افقی
• تراز متن در سلول‌های جدول
• جدول با ستون‌های راه‌راه عمودی
• جدول با ترکیب نوارهای راه‌راه عمودی و افقی
• جدول با خطوط جداکننده افقی
• ردیف‌های جدول با قابلیت تغییر ظاهر هنگام قرار گرفتن نشانگر ماوس روی آن‌ها

جدول با حاشیه‌های ادغام‌شده

شما می‌توانید با تغییر ویژگی 'border-collapse'، فاصله بین حاشیه‌های جدول را مدیریت کنید. این ویژگی تعیین می‌کند که حاشیه‌های سلول‌های مجاور جدول چگونه با یکدیگر تعامل داشته باشند. با تنظیم آن می‌توانید فاصله یا فضای خالی بین حاشیه‌های داخل جدول را کنترل کنید.

با تنظیم ویژگی 'border-collapse' روی مقدار "collapse"، حاشیه‌ها با یکدیگر ادغام می‌شوند و فاصله بین آن‌ها از بین می‌رود؛ درحالی‌که مقدار "separate" امکان کنترل فاصله را با استفاده از ویژگی 'border-spacing' فراهم می‌کند و به شما اجازه می‌دهد ظاهر چیدمان جدول را به شکل دلخواه سفارشی کنید.

مثال

این مثال، جدولی با حاشیه‌های ادغام‌شده را نشان می‌دهد که در آن حاشیه‌های جدول با استفاده از ویژگی border-collapse: collapse; به یک حاشیه واحد تبدیل می‌شوند.

<!DOCTYPE html>
<html>
<head>
   <style>
      #table1 {
         border-collapse: separate;
      }
      #table2 {
         border-collapse: collapse;
      }
   </style>
</head>
<body>
   <table id="table1" border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
   <br />
   <table id="table2" border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>
</html>

جدول با ردیف‌های راه‌راه افقی

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

انتخابگر :nth-child(even) هر ردیف دوم را هدف قرار می‌دهد و با اعمال یک رنگ پس‌زمینه، جلوه‌ای راه‌راه ایجاد می‌کند.

مثال

این مثال، جدولی با ردیف‌های راه‌راه افقی را نشان می‌دهد که در آن ردیف‌های متناوب با رنگ‌های پس‌زمینه متفاوت استایل‌دهی شده‌اند:

<!DOCTYPE html>
<html>
<head>
   <style>
      tr:nth-child(even) {
         background-color: #8a83de;
      }
   </style>
</head>
<body>
   <table border="1">
      <table border="1">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </table>
</body>
</html>

تراز متن در سلول‌های جدول

می‌توانید متن داخل سلول‌های جدول را به‌صورت افقی و عمودی، با استفاده از ویژگی‌های text-align و vertical-align تراز کنید.

مثال

این مثال، نحوه تراز کردن متن در سلول‌های جدول را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <style>
      td,
      th {
         text-align: center;
         vertical-align: middle;
      }
   </style>
</head>
<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>
</html>

جدول با نوارهای راه‌راه عمودی

روش ایجاد نوارهای راه‌راه عمودی با اعمال استایل‌های متناوب به ستون‌های جدول، خوانایی آن را افزایش می‌دهد. این کار با استفاده از انتخابگر :nth-child(even) برای هر دو عنصر داده جدول (td) و سرستون جدول (th) انجام می‌شود.

مثال

این مثال، جدولی با نوارهای راه‌راه عمودی را نشان می‌دهد که در آن ستون‌های متناوب با رنگ‌های پس‌زمینه متفاوت استایل‌دهی شده‌اند:

<!DOCTYPE html>
<html>
<head>
   <style>
      td:nth-child(even),
      th:nth-child(even) {
         background-color: #D6EEEE;
      }
   </style>
</head>
<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>
</html>

جدول با ترکیب نوارهای راه‌راه عمودی و افقی

می‌توانید با ترکیب الگوهای راه‌راه افقی و عمودی در جدول، جلوه‌ای بصری جذاب ایجاد کنید. برای این کار، استایل‌های متناوب را هم به ردیف‌ها (:nth-child(even)) و هم به ستون‌ها (td:nth-child(even), th:nth-child(even)) اعمال کنید.

برای تقویت این جلوه، می‌توانید میزان شفافیت رنگ‌ها را با استفاده از تابع rgba() تنظیم کنید تا هم‌پوشانی نوارها ظاهری جذاب و چشم‌نواز داشته باشد و نتیجه‌ای منحصربه‌فرد و از نظر بصری جالب ایجاد شود.

مثال

این مثال، جدولی با ترکیب نوارهای راه‌راه عمودی و افقی را نشان می‌دهد که در آن ردیف‌ها و ستون‌های متناوب با رنگ‌های پس‌زمینه متفاوت استایل‌دهی شده‌اند:

<!DOCTYPE html>
<html>
<head>
   <style>
      tr:nth-child(even) {
         background-color: rgba(150, 212, 212, 0.4);
      }
      th:nth-child(even),
      td:nth-child(even) {
         background-color: rgba(212, 150, 192, 0.4);
      }
   </style>
</head>
<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>
</html>

جدول با خطوط جداکننده افقی

می‌توانید با افزودن خطوط جداکننده افقی، ساختار بصری جدول خود را بهبود دهید. برای ایجاد این جلوه، هر عنصر '<tr>' را با یک حاشیه در پایین استایل‌دهی کنید.

این سفارشی‌سازی CSS، جداسازی واضحی بین ردیف‌ها ایجاد می‌کند و به خوانایی بیشتر جدول و نمایش منظم‌تر داده‌های جدولی کمک می‌کند.

مثال

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

<!DOCTYPE html>
<html>
<head>
   <style>
      table {
         border-collapse: collapse;
      }
      tr {
         border-bottom: 5px solid #ddd;
      }
      th,
      td {
         padding: 10px;
         /* Add padding for better visibility */
      }
   </style>
</head>
<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>
</html>

برنامه HTML بالا، یک جدول ساده با دو ردیف و دو ستون تعریف می‌کند. استایل‌های CSS برای ایجاد جداسازی بصری بین ردیف‌ها، با استفاده از یک حاشیه پیوسته در پایین هر ردیف اعمال شده‌اند. ویژگی border-collapse باعث ایجاد چیدمانی مرتب‌تر می‌شود و برای بهبود وضوح سلول‌های جدول، فاصله داخلی به آن‌ها اضافه شده است.

ردیف‌های جدول با قابلیت تغییر ظاهر هنگام قرار گرفتن نشانگر ماوس روی آن‌ها

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

مثال

این مثال، ردیف‌های جدولی را نشان می‌دهد که رنگ پس‌زمینه آن‌ها هنگام قرار گرفتن نشانگر ماوس روی ردیف تغییر می‌کند:

<!DOCTYPE html>
<html>
<head>
   <style>
      tr:hover {
         background-color: #D6EEEE;
      }
   </style>
</head>
<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>
</html>

برنامه HTML بالا، جدولی با حاشیه ایجاد می‌کند. استایل CSS باعث می‌شود هنگام قرار گرفتن نشانگر ماوس روی ردیف‌ها، رنگ پس‌زمینه آن‌ها به آبی روشن تغییر کند و تعامل کاربران با جدول بهبود یابد.