آموزش مقدماتیHTMLوCSS(جلسه۲۱:سازماندهی داده‌ با جداول–بخش۱)
1398/03/30 11:43 , میلاد صاحب نظر

آموزش مقدماتیHTMLوCSS(جلسه۲۱:سازماندهی داده‌ با جداول–بخش۱)

جداول HTML ایجاد شدند تا یک روش ساده و آسان برای نشانه‌گذاری داده‌ها با ساختار جدولی و نمایش آن داده‌ها به فرمی که خواندن و درک آن برای کاربران آسان باشد، فراهم کنند.

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

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

خوشبختانه، از آن زمان‌ها خیلی گذشته است. امروزه از جدول‌ها به طور خاص برای سازماندهی و مرتب‌سازی داده‌ها استفاده می‌شود (یعنی همان هدف اصلی طراحی جداول) و CSS دیگر می‌تواند وظیفه تعیین موقعیت و طراحی آن‌ها را انجام دهد.

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

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

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد 
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

ایجاد یک جدول

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

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

وقتی همه این عنصرها با هم کار کنند، یک جدول کامل و شامل ایجاد می‌کنند.

جدول

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

<table>
  ...
</table>
ردیف جدول

وقتی یک جدول در HTML تعریف می‌شود، ردیف‌های جدول را می‌توان با استفاده از عنصر <tr> به آن اضافه کرد. یک جدول می‌تواند ردیف‌های جدول بی‌شماری داشته باشد (یا به عبارت دیگر دارای عنصرهای <tr> بی‌شمار باشد).

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

<table>
  <tr>
    ...
  </tr>
  <tr>
    ...
  </tr>
</table>
داده‌های جدول

وقتی یک جدول تعریف می‌شود و ردیف‌های آن جدول مشخص می‌شوند، می‌توان سلول‌های داده را از طریق داده‌های جدول یا عنصر <td> به آن اضافه کرد. لیست کردن چندین عنصر <td> یکی پس از دیگری، ستون‌هایی در داخل یک ردیف جدول ایجاد خواهد کرد.

<table>
  <tr>
    <td>Don&#8217;t Make Me Think by Steve Krug</td>
    <td>In Stock</td>
    <td>1</td>
    <td>$30.02</td>
  </tr>
  <tr>
    <td>A Project Guide to UX Design by Russ Unger &#38; Carolyn Chandler</td>
    <td>In Stock</td>
    <td>2</td>
    <td>$52.94 ($26.47 &#215; 2)</td>
  </tr>
  <tr>
    <td>Introducing HTML5 by Bruce Lawson &#38; Remy Sharp</td>
    <td>Out of Stock</td>
    <td>1</td>
    <td>$22.23</td>
  </tr>
  <tr>
    <td>Bulletproof Web Design by Dan Cederholm</td>
    <td>In Stock</td>
    <td>1</td>
    <td>$30.17</td>
  </tr>
</table>

هدر جدول

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

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

تفاوت بین دو عنصر شبیه به تفاوت بین هدینگ‌ها (عنصرهای <h1> تا <h6>) و پاراگراف‌ها (عنصرهای <p>) است. اگرچه محتوای یک هدینگ را می‌توان در داخل یک پاراگراف هم به کار برد، اما انجام این کار اصلاً منطقی نیست.

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

می‌توان از هدرهای جدول هم در داخل ستون‌ها و هم ردیف‌ها استفاده کرد. داده‌های درون یک جدول، مشخص می‌کنند که محل مناسب هدرها کجا است. اتریبیوت scope به کمک می‌کند تا دقیقاً مشخص کنیم که یک هدر جدول به چه محتوایی مرتبط است.

اتریبیوت Scope با استفاده از مقادیر colgroup، row، col و rowgroup مشخص‌ می‌کند که آیا یک هدر جدول به درد یک ردیف یا ستون می‌خورد یا خیر. مرسوم‌ترین مقادیر مورد استفاده عبارت‌اند از col و row.

مقدار col نشان می‌دهد که هر سلول درون ستون، مستقیماً به آن هدر جدول مربوط می‌شود، و مقدار row نشان می‌دهد که هر سلول درون ردیف نیز مستقیماً به آن هدر جدول مرتبط است.

استفاده از عنصر <th>، همراه با اتریبیوت scope، به خوانندگان آن صفحه و تکنولوژی‌های مرتبط کمک زیادی می‌کند تا از جدول سر در بیاورند. از این رو، جداول همچنین برای افرادی که با استفاده از آن تکنولوژی‌ها یک صفحه وب را مطالعه می‌کنند نیز مفید خواهند بود.

علاوه بر این، بسته به مرورگر، هدرهای جدول ممکن است استایل‌های پیش‌فرضی نیز دریافت کنند، معمولاً bold یا در مرکز قرار گرفته.

<table>
  <tr>
    <th scope="col">Item</th>
    <th scope="col">Availability</th>
    <th scope="col">Qty</th>
    <th scope="col">Price</th>
  </tr>
  <tr>
    <td>Don&#8217;t Make Me Think by Steve Krug</td>
    <td>In Stock</td>
    <td>1</td>
    <td>$30.02</td>
  </tr>
  <tr>
    <td>A Project Guide to UX Design by Russ Unger &#38; Carolyn Chandler</td>
    <td>In Stock</td>
    <td>2</td>
    <td>$52.94 ($26.47 &#215; 2)</td>
  </tr>
  <tr>
    <td>Introducing HTML5 by Bruce Lawson &#38; Remy Sharp</td>
    <td>Out of Stock</td>
    <td>1</td>
    <td>$22.23</td>
  </tr>
  <tr>
    <td>Bulletproof Web Design by Dan Cederholm</td>
    <td>In Stock</td>
    <td>1</td>
    <td>$30.17</td>
  </tr>
</table>

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

اتریبیوت headers

اتریبیوت headers بسیار شبیه به اتریبیوت scope هستند. به طور پیش‌فرض، اتریبیوت Scope را فقط می‌توان در عنصر <th> به کار برد. در صورتی که لازم شد یک سلول (یک عنصر <td> یا <th>) با یک هدر متفاوت مرتبط شود، اتریبیوت headers وارد عمل می‌شود.

مقدار اتریبیوت headers در یک عنصر <td> یا <th> باید با مقدار اتریبیوت id از عنصر <th> که سلول به آن مربوط می‌شود، مطابقت داشته باشد.

ساختار جدول

داشتن علم چگونگی ایجاد یک جدول و تنظیم داده‌ها بسیار علم قدرتمند و مهمی است. به هر حال، چند عنصر دیگر هم هستند که به ما کمک می‌کنند داده‌ها را سازماندهی و یک جدول را ساختاردهی کنیم. این عنصرها عبارت‌اند از <tbody>، <thead>، <caption> و <tfoot>.

Caption جدول

عنصر <caption> یک کپشن یا عنوان برای یک جدول فراهم می‌کند. کپشن به کاربران کمک می‌کند تشخیص دهند که جدول در چه موردی است و می‌توانند انتظار یافتن چه داده‌هایی را از جدول داشته باشند.

عنصر <caption> باید بلافاصله پس از تگ باز <table> بیاید و به صورت پیش‌فرض در بالای یک جدول قرار می‌گیرد.

<table>
  <caption>Design and Front-End Development Books</caption>
  ...
</table>

Body، head و Foot جدول

محتوا درون جداول را می‌توان به چندین گروه تقسیم کرد که عبارت‌اند از یک تیتر، یک بدنه و یک انتها. عنصرهای <thead> (تیتر جدول)، <tbody> (بدنه جدول) و <tfoot> (انتهای جدول) به سازماندهی ساختاری جداول کمک می‌کنند.

عنصر تیتر جدول، یعنی <thead>، ردیف یا ردیف‌های سر تیتر یک جدول را احاطه می‌کند تا تیتر را تشکیل دهد. تیتر جدول باید در بالای یک جدول، بعد از هر عنصر <caption> و قبل از هر عنصر <tbody> قرار بگیرد.

پس از تیتر جدول، می‌توانیم از عنصرهای <tbody> یا <tfoot> استفاده کرد. در اصل عنصر <tfoot> باید بلافاصله پس از عنصر <thead> بیاید، اما HTML5 یک راه گریز برای این حالت فراهم کرده است.

اکنون می‌توانیم این عنصرها را به هر ترتیبی که می‌خواهیم قرار دهیم، البته تا وقتی که عنصر والد یکدیگر نباشند. عنصر <tbody> شامل داده‌هایی است که محتوای یک جدول را تشکیل می‌دهند.

<table>
  <caption>Design and Front-End Development Books</caption>
  <thead>
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Availability</th>
      <th scope="col">Qty</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Don&#8217;t Make Me Think by Steve Krug</td>
      <td>In Stock</td>
      <td>1</td>
      <td>$30.02</td>
    </tr>
    ...
  </tbody>
  <tfoot>
    <tr>
      <td>Subtotal</td>
      <td></td>
      <td></td>
      <td>$135.36</td>
    </tr>
    <tr>
      <td>Tax</td>
      <td></td>
      <td></td>
      <td>$13.54</td>
    </tr>
    <tr>
      <td>Total</td>
      <td></td>
      <td></td>
      <td>$148.90</td>
    </tr>
  </tfoot>
</table>

ترکیب چندین سلول

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

در چنین مواردی، می‌توانیم از اتریبیوت‌های colspan و rowspan استفاده کنیم. این دو اتریبیوت در هر دو عنصرهای <td> یا <th> عمل می‌کنند.

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

هر اتریبیوت یک مقدار integer می‌پذیرد که تعداد سلول‌هایی که باید گسترده شوند را نشان می‌دهد و مقدار پیش‌فرض آن برابر با 1 است.

با استفاده از جدول کتاب‌ها که در کدهای بالا ایجاد کردیم، حالا می‌توانیم سلول‌های خالی جدول را از داخل فوتر یا انتهای جدول حذف و همچنین هدر جدول را نیز مرتب و تمیز کنیم.

<table>
  <caption>Design and Front-End Development Books</caption>
  <thead>
    <tr>
      <th scope="col" colspan="2">Item</th>
      <th scope="col">Qty</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Don&#8217;t Make Me Think by Steve Krug</td>
      <td>In Stock</td>
      <td>1</td>
      <td>$30.02</td>
    </tr>
    ...
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Subtotal</td>
      <td>$135.36</td>
    </tr>
    <tr>
      <td colspan="3">Tax</td>
      <td>$13.54</td>
    </tr>
    <tr>
      <td colspan="3">Total</td>
      <td>$148.90</td>
    </tr>
  </tfoot>
</table>

مرزهای جدول

استفاده مؤثر از مرزها می‌توانند به جامع‌تر و قابل‌فهم‌تر کردن جدول کمک کنند. مرزهای اطراف یک جدول یا سلول‌های تکی، وقتی کاربر سعی در تفسیر داده‌ها و اسکن سریع اطلاعات دارد، می‌توانند تأثیر بزرگ و زیادی داشته باشند.

در هنگام استایل‌بندی مرزهای جدول با CSS، دو ویژگی وجود دارند که خیلی مفید هستند: border-collaps و border-spacing.

ویژگی Border Collapse

جداول شامل یک عنصر <table> والد و همچنین عنصرهای <th> یا <td> تودرتو هستند. وقتی مرزهایی در اطراف این عنصرها ایجاد می‌کنیم، آن مرزها شروع به جمع شدن روی هم می‌کنند و مرز یک عنصر در کنار مرز یک عنصر دیگر قرار می‌گیرد.

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

ویژگی border-collapse مدل مرز یک جدول را مشخص می‌کند. سه مقدار برای ویژگی border-collapse وجود دارند: separate، collapse و inherit.

به طور پیش‌فرض، مقدار ویژگی border-collapse برابر با separate است، یعنی اینکه همه مرز‌های مختلف یکی پس از دیگری با هم جمع می‌شوند، همان‌طور که در بالا توضیح داده شد.

از طرف دیگر، مقدار collapse مرزها را به یک مرز متراکم می‌کند و سلول جدول را به عنوان مرز اصلی انتخاب می‌کند.

table {
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #cecfd5;
  padding: 10px 15px;
}

ویژگی Border-Spacing

ویژگی border-spacing با مقدار separate به مرزها اجازه می‌دهد در کنار یکدیگر قرار گیرند، در حالی که ویژگی border-spacing می‌تواند تشخیص دهد که چقدر فضا (اگر وجود داشته باشد) بین مرزها به وجود می‌آید.

برای مثال، یک جدول یا مرز ۱ پیکسل در اطراف کل جدول و یک مرز ۱ پیکسل در اطراف هر سلول، دارای مرز ۲ پیکسلی در اطراف همه سلول‌ها خواهد بود، چون مرزها در کنار یکدیگر قرار گرفته‌اند.

اضافه کردن یک مقدار border-spacing چهار پیکسلی، مرزها را تا اندازه ۴ پیکسل از هم جدا می‌کند.

table {
  border-collapse: separate;
  border-spacing: 4px;
}
table,
th,
td {
  border: 1px solid #cecfd5;
}
th,
td {
  padding: 10px 15px;
}

ویژگی border-spacing فقط زمانی که مقدار ویژگی border-collapse برابر با Separate باشد عمل می‌کند، که یک مقدار پیش‌فرض است. اگر ویژگی border-collapse قبلاً استفاده نشده باشد، می‌توانیم بدون هیچ مشکل و نگرانی از ویژگی border-spacing استفاده کنیم.

علاوه بر این، ویژگی border-spacing می‌تواند دو مقدار طول بپذیرد: اولین مقدار برای فضا دهی افقی و دومین مقدار برای فضا دهی عمودی. برای مثال، تعریف border-spacing: 5px 10 px;، پنج پیکسل فضای افقی بین مرزها و ۱۰ پیکسل فضای عمودی بین مرزها ایجاد می‌کند.

اضافه کردن مرز به ردیف‌ها

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

کارمان را با اطمینان حاصل کردن از اینکه ویژگی border-collapse دارای مقدار collapse است شروع می‌کنیم و سپس یک border پایین به هر سلول جدول اضافه می‌کنیم، مهم نیست که یک عنصر <th> یا <td> باشد.

اگر بخواهیم، می‌توانیم با استفاده از selector کلاس سودوی last-child: (یا pseudo-class) برای انتخاب آخرین عنصر <tr> درون جدول و هدف قرار دادن عنصرهای <td> درون آن ردیف، border پایین را از سلول‌های داخل آخرین ردیف جدول حذف کنیم.

علاوه بر این، اگر یک جدول از عنصرهای ساختاری استفاده می‌کند، باید اطمینان حاصل کنیم که آخرین ردیف جدول، حتماً درون عنصر <tfoot> قرار بگیرد.

table {
  border-collapse: collapse;
}
th,
td {
  border-bottom: 1px solid #cecfd5;
  padding: 10px 15px;
}
tfoot tr:last-child td {
  border-bottom: 0;
}

مجهز کردن جدول

در تلاش برای خواناتر کردن جداول، یک عمل طراحی معمول این است که ردیف‌های جدول را با رنگ‌های پشت زمینه جایگزین "مجهز" می‌کنیم. این باعث می‌شود ردیف‌ها واضح‌تر شوند و یک راهنمای بصری برای اسکن اطلاعات فراهم می‌کند.

یک روش برای انجام این کار، این است که یک کلاس در همه عنصرهای <tr> قرار دهیم و یک رنگ پشت زمینه برای آن کلاس تنظیم کنیم. روش دیگر، که روش آسان‌تری هم هست، استفاده از Selector کلاس سودوی nth-child: با یک آرگومان even یا odd برای انتخاب همه عنصرهای <tr> است.

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

table {
  border-collapse: separate;
  border-spacing: 0;
}
th,
td {
  padding: 10px 15px;
}
thead {
  background: #395870;
  color: #fff;
}
tbody tr:nth-child(even) {
  background: #f0f0f2;
}
td {
  border-bottom: 1px solid #cecfd5;
  border-right: 1px solid #cecfd5;
}
td:first-child {
  border-left: 1px solid #cecfd5;
}

درون این کد، چند ریزه کاری وجد دارند که ارزش اشاره شدن را دارند. برای شروع، عنصر <table> یک ویژگی border-collapse دارد که مقدار آن Separate  است و همچنین یک ویژگی border-spacing نیز دارد که مقدار آن 0 است.

دلیل این امر این است که عنصرهای <td> دارای مرز هستند، در حالی که عنصرهای <th> مرز ندارند. بدون ویژگی border-collapse با مقدار Separate برای مجزا کردن مرزهای عنصرهای <td>، بدنه و انتهای جدول عریض‌تر از تیتر آن خواهند شد.

چون ویژگی border collapse دارای مقدار separate است، باید مراقب چگونگی اعمال مرزها برای عنصرهای <td> باشیم. در اینجا، مرزها روی سمت راست و پایین همه عنصرهای <td> تنظیم شده‌اند.

بنابراین، اولین عنصر <td> واقع در یک عنصر <tr>، یک مرز سمت چپ دریافت خواهد کرد. چون تمام عنصرهای <td> در کنار یکدیگر قرار می‌گیرند، پس مرزهای آن‌ها نیز همین‌طور هستند و ظاهر یک مرز واضح و ثابت را در اطراف هر عنصر به وجود می‌آورند.

در آخر، همه عنصرهای <th> یک پشت زمینه آبی دریافت می‌کنند و همه عنصرهای <tr>‌ زوج به واسطه Selector کلاس سودوی nth-child: یک پشت زمینه خاکستری دریافت می‌کنند.

تراز کردن متن

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

اطلاعات دیگر، بسته به محتوای آن‌ها، می‌توانند در مرکز قرار گیرند. می‌توانیم با استفاده از ویژگی Text-align در CSS متن را به صورت افقی جا به جا کنیم، که این موضوع را در جلسات یازده و دوازده پوشش دادیم.

به هر حال، برای تراز عمودی متن، ویژگی vertical-align مورد استفاده قرار می‌گیرد. ویژگی vertical-align فقط برای عنصرهای inline و سلول جدول عمل می‌کند – اما برای عنصرهای سطح block، inline-block یا عنصرهای دیگر عمل نمی‌کند.

ویژگی vertical-align چند مقدار متفاوت و مفید را می‌پذیرد. معمول‌ترین مقادیر عبارت‌اند از middle، top و bottom. این مقادیر به صورت عمودی متن را مرتبط با سلول جدول، برای عنصرهای سلول جدول یا برای نزدیک‌ترین عنصر والد برای عنصرهای inline-level تنظیم می‌کنند.

با اصلاح HTML و CSS و درجه ویژگی‌های text-align و vertical-align، می‌توانیم طراحی جدول کتاب‌هایمان را مرتب و تمیز کنیم. توجه کنید که داده‌های درون جدول خیلی تمیزتر و قابل‌فهم‌تر خواهند شد.

HTML

<table>
  <thead>
    <tr>
      <th scope="col" colspan="2">Item</th>
      <th scope="col">Qty</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <strong class="book-title">Don&#8217;t Make Me Think</strong> by Steve Krug
      </td>
      <td class="item-stock">In Stock</td>
      <td class="item-qty">1</td>
      <td class="item-price">$30.02</td>
    </tr>
    <tr>
      <td>
        <strong class="book-title">A Project Guide to UX Design</strong> by Russ Unger &#38; Carolyn Chandler
      </td>
      <td class="item-stock">In Stock</td>
      <td class="item-qty">2</td>
      <td class="item-price">$52.94 <span class="item-multiple">$26.47 &#215; 2</span></td>
    </tr>
    <tr>
      <td>
        <strong class="book-title">Introducing HTML5</strong> by Bruce Lawson &#38; Remy Sharp
      </td>
      <td class="item-stock">Out of Stock</td>
      <td class="item-qty">1</td>
      <td class="item-price">$22.23</td>
    </tr>
    <tr>
      <td>
        <strong class="book-title">Bulletproof Web Design</strong> by Dan Cederholm
      </td>
      <td class="item-stock">In Stock</td>
      <td class="item-qty">1</td>
      <td class="item-price">$30.17</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Subtotal</td>
      <td>$135.36</td>
    </tr>
    <tr>
      <td colspan="3">Tax</td>
      <td>$13.54</td>
    </tr>
    <tr>
      <td colspan="3">Total</td>
      <td>$148.90</td>
    </tr>
  </tfoot>
</table>

CSS

table {
  border-collapse: separate;
  border-spacing: 0;
  color: #4a4a4d;
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
th,
td {
  padding: 10px 15px;
  vertical-align: middle;
}
thead {
  background: #395870;
  color: #fff;
}
th:first-child {
  text-align: left;
}
tbody tr:nth-child(even) {
  background: #f0f0f2;
}
td {
  border-bottom: 1px solid #cecfd5;
  border-right: 1px solid #cecfd5;
}
td:first-child {
  border-left: 1px solid #cecfd5;
}
.book-title {
  color: #395870;
  display: block;
}
.item-stock,
.item-qty {
  text-align: center;
}
.item-price {
  text-align: right;
}
.item-multiple {
  display: block;
}
tfoot {
  text-align: right;
}
tfoot tr:last-child {
  background: #f0f0f2;
}

خلاصه

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

در جلسه آینده راجع به جدول کاملاً استایل‌بندی شده صحبت خواهیم کرد و سپس تمام آموخته‌های این دو جلسه را در یک تمرین روی سایت Styles Conference پیاده‌سازی خواهیم کرد.

با MUG همراه باشید!

منبع: learn.shayhowe 

جلسه بعد                                                                جلسه قبل

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
۵ قالب رایگان HTML برای ایجاد سریع و آسان‌ وبسایت‌ها!
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات