آموزش مقدماتیHTMLوCSS(جلسه۲۲:سازماندهی داده با جدول–بخش۲)
1398/04/02 12:01 , میلاد صاحب نظر

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

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

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

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

جدول کاملاً استایل‌بندی شده

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

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>
        <span class="text-offset">by Steve Krug</span>
      </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>
        <span class="text-offset">by Russ Unger &#38; Carolyn Chandler</span>
      </td>
      <td class="item-stock">In Stock</td>
      <td class="item-qty">2</td>
      <td class="item-price">$52.94 <span class="text-offset item-multiple">$26.47 &#215; 2</span></td>
    </tr>
    <tr>
      <td>
        <strong class="book-title">Introducing HTML5</strong>
        <span class="text-offset">by Bruce Lawson &#38; Remy Sharp</span>
      </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>
        <span class="text-offset">by Dan Cederholm</span>
      </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 class="text-offset">
      <td colspan="3">Subtotal</td>
      <td>$135.36</td>
    </tr>
    <tr class="text-offset">
      <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;
  background: linear-gradient(#49708f, #293f50);
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
}
th:first-child {
  border-top-left-radius: 5px;
  text-align: left;
}
th:last-child {
  border-top-right-radius: 5px;
}
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;
}
.text-offset {
  color: #7c7c80;
  font-size: 12px;
}
.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;
  color: #395870;
  font-weight: bold;
}
tfoot tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
tfoot tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

تمرین

حالا که می‌دانیم چطور باید جداول را ایجاد و استایل‌بندی کنیم، اجازه دهید این آموخته‌ها را روی آخرین صفحه باقیمانده از وبسایت Styles Conference (یعنی صفحه زمان‌بندی) پیاده‌سازی کنیم.

  1. کارهای صفحه زمان‌بندی را با باز کردن فایل html و اضافه کردن یک عنصر <section> با مقدار row برای اتریبیوت Class شروع می‌کنیم، بسیار شبیه به کاری که برای تمام زیر صفحات دیگر انجام دادیم. درون این عنصر <section> جدید، اجازه دهید یک عنصر <div> با مقدار container برای اتریبیوت class اضافه کنیم.
    <section class="row">
      <div class="container">
        ...
      </div>
    </section>
    ​

    با این عنصرها و کلاس‌ها، ما یک بخش جدید از صفحه با پشت زمینه سفید و padding عمودی ایجاد کردیم و همچنین محتوا را نیز در مرکز صفحه قرار دادیم. چیزی که در اینجا نسبت به تمام زیر صفحات دیگر متفاوت است، این است که مقدار container در اتریبیوت Class، به جای مقدار grid در اتریبیوت class موجود در عنصر <div> قرار گرفته است.

    چون از هیچ‌کدام از کلاس‌های col (کلاس‌های ستونی) استفاده نمی‌کنیم، پس از مقدار grid در اتریبیوت Class صرف‌ نظر می‌کنیم و این به خاطر وجود مقدار container در اتریبیوت class است.

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

    برای شروع، اجازه دهید ساختار اولین جدول را نمایش دهیم، که شامل عنصرهای <thead>، <table> و <tbody> است.
    <section class="row">
      <div class="container">
    
        <table>
          <thead>
            ...
          </thead>
          <tbody>
            ...
          </tbody>
        </table>
    
      </div>
    </section>​
  3. در حال حاضر، اگرچه اولین جدول ما شامل هیچ داده‌ای نیست، اما چند استایل برای آن اعمال شده‌اند. به طور دقیق‌تر، آن کد Reset که در جلسات اول و دوم اضافه کردیم تا تمام استایل‌های پیش‌فرض مرورگرها را منتفی کند، در جدول به ویژگی border-collapse مقدار collapse و به ویژگی border-spacing مقدار 0 را داده است.

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

    در بخش جدید از استایل‌های مخصوص برای صفحه زمان‌بندی (که درست در زیر استایل‌های مخصوص صفحه سخنگویان قرار خواهد گرفت)، اجازه دهید عنصرهای <table> را به گونه‌ای تنظیم کنیم که دارای width با مقدار 100% و یک margin پایین با مقدار 44 پیکسل باشند.

    سپس، از selector کلاس سودوی last-child: برای شناسایی آخرین عنصر <table> داخل بخش استفاده می‌کنیم. حالا اجازه دهید مقدار margin پایین آن را روی 0 پیکسل تنظیم کنیم. انجام این کار، از ایجاد تداخل این جدول با padding پایین متعلق به عنصر <section> با مقدار row برای اتریبیوت class جلوگیری می‌کند.

    تا اینجا، بخش جدید درون فایل main.css به این شکل خواهد بود:
    /*
      ========================================
      Schedule
      ========================================
    */
    
    table {
      margin-bottom: 44px;
      width: 100%;
    }
    table:last-child {
      margin-bottom: 0;
    }
    ​
  4. حالا اجازه دهید کمی داده به جدولمان اضافه کنیم. کار را با اولین روز کنفرانسمان شروع می‌کنیم، روز کارگاه در ۲۴ام آگوست.

    درون عنصر <thead> از جدول یک عنصر <tr> ایجاد می‌کنیم. اولین سلول داخل ردیف یک عنصر <th> خواهد بود که درون آن به اتفاق مهم روز اشاره شده است: “Workshop”. چون عنصر <th> یک هدینگ برای ردیف است، پس همچنین اتریبیوت Scope با مقدار row را نیز به آن اضافه می‌کنیم.

    بعد از عنصر <th>، یک عنصر <td> با تاریخ “August 24th” قرار می‌گیرد. حالا، اکثر مواقع ما سه ستون خواهیم داشت، اولین ستون یک هدینگ جدول خواهد بود که یک زمان در روز را مشخص می‌کند و دو ستون بعدی سلول‌های معمولی جدول خواهند بود که سخنگویان را در آن زمان مشخص می‌کنند.

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

    کد ما برای جدول، حالا به این شکل خواهد بود:
    <table>
      <thead>
        <tr>
          <th scope="row">
            Workshops
          </th>
          <td colspan="2">
            August 24th
          </td>
        </tr>
      </thead>
      <tbody>
        ...
      </tbody>
    </table>
    ​
  5. داخل عنصر <tbody> اجازه دهید فعالیت‌های روز را اضافه کنیم. کار را با اضافه کردن یک عنصر <tr> مستقیماً به درون ردیف شروع می‌کنیم که این عنصر دارای یک عنصر <th> و <td> می‌باشد.

    در عنصر <th> (و تمام عنصرهای <th> مابعد آن)، اتریبیوت scope با مقدار row اضافه می‌کنیم تا از لحاظ معنایی این عنصر را به عنوان تیتر برای ردیف مشخص کند.

    سپس، اجازه دهید درون عنصر <th> یک عنصر <time> اضافه کنیم که زمان اولین فعالیت روز (یعنی “AM 8:30”) را نشان دهد. ما همچنین یک اتریبیوت datetime در عنصر <time> قرار می‌دهیم که مقدار آن زمان را به ساعت، دقیقه و ثانیه بیان می‌کند (یعنی به این شکل: 08:30:00).

    در عنصر <td> که پس از عنصر <th> قرار دارد، نام فعالت را درج می‌کنیم (چون هیچ سخنگویی در این زمان وجود ندارد)، که در این مورد نام فعالیت “Registration” است. چون فقط یک فعالیت در این زمان وجود دارد، همچنین اتریبیوت colspan با مقدار 2 را نیز به عنصر <td> اضافه می‌کنیم.

    در کل کد ما برای اولین جدول به این شکل خواهد بود:
    <table>
      <thead>
        <tr>
          <th scope="row">
            Workshops
          </th>
          <td colspan="2">
            August 24th
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            <time datetime="08:30:00">8:30 AM</time>
          </th>
          <td colspan="2">
            Registration
          </td>
        </tr>
      </tbody>
    </table>
    ​
  6. برای دومین ردیف داخل عنصر <tbody>، یک عنصر <tr> درست در زیر ردیف قبلی اضافه می‌کنیم. سپس یک عنصر <th> با اتریبیوت scope که دارای مقدار row است اضافه می‌کنیم و دوباره یک عنصر <time> با زمان مناسب و مقدار اتریبیوت datetime در داخل آن عنصر <th> اضافه می‌کنیم.

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

    به یاد داشته باشید، ما به نام هر کدام از سخنگویان یک اتریبیوت id اضافه کردیم که به عنصرهای والد هر سخنگو اشاره می‌کردند. با استفاده از آن مقدار اتریبیوت id که پس از آن نام فایل html و یک علامت # قرار دارد، می‌توانیم یک لینک مستقیم به سمت توضیح سخنرانی و بیوگرافی آن سخنگو در صفحه Speakers ایجاد کنیم.

    درون عنصر <a>، یک عنصر <h4> همراه با نام سخنگو و پس از آن عنوان سخنرانی را درج می‌کنیم.

    کد دو کارگاه اول ما به این شکل خواهد بود:
    <table>
      <thead>
        <tr>
          <th scope="row">
            Workshops
          </th>
          <td colspan="2">
            August 24th
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            <time datetime="08:30:00">8:30 AM</time>
          </th>
          <td colspan="2">
            Registration
          </td>
        </tr>
        <tr>
          <th scope="row">
            <time datetime="09:00:00">9:00 AM</time>
          </th>
          <td>
            <a href="speakers.html#adam-connor">
              <h4>Adam Connor</h4>
              Lights! Camera! Interaction! Design Inspiration from Filmmakers
            </a>
          </td>
          <td>
            <a href="speakers.html#jennifer-jones">
              <h4>Jennifer Jones</h4>
              What Designers Can Learn from Parenting
            </a>
          </td>
        </tr>
      </tbody>
    </table>​
  7. از اینجا به بعد، می‌توانیم این الگو را برای هر فعالیت و سخنگو تکرار کنیم تا اولین جدولمان به پایان برسد و سپس دو جدول بعدی را برای دو روز دوم کنفرانس اضافه می‌کنیم.

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

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

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

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

    کد کامل برای تمام سه جدول را در انتهای این تمرین مشاهده خواهید کرد. فعلاً، جدول روز اول که شامل نهار و دو سخنگو می‌باشد به این شکل خواهد بود:
    <table>
      <thead>
        <tr>
          <th scope="row">
            Workshops
          </th>
          <td colspan="2">
            August 24th
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            <time datetime="08:30:00">8:30 AM</time>
          </th>
          <td colspan="2">
            Registration
          </td>
        </tr>
        <tr>
          <th scope="row">
            <time datetime="09:00:00">9:00 AM</time>
          </th>
          <td>
            <a href="speakers.html#adam-connor">
              <h4>Adam Connor</h4>
              Lights! Camera! Interaction! Design Inspiration from Filmmakers
            </a>
          </td>
          <td>
            <a href="speakers.html#jennifer-jones">
              <h4>Jennifer Jones</h4>
              What Designers Can Learn from Parenting
            </a>
          </td>
        </tr>
        <tr>
          <th scope="row">
            <time datetime="12:30:00">12:30 PM</time>
          </th>
          <td colspan="2">
            Lunch
          </td>
        </tr>
        <tr>
          <th scope="row">
            <time datetime="14:00">2:00 PM</time>
          </th>
          <td>
            <a href="speakers.html#tessa-harmon">
              <h4>Tessa Harmon</h4>
              Crafty Coding: Generating Knitting Patterns
            </a>
          </td>
          <td>
            <a href="speakers.html#russ-unger">
              <h4>Russ Unger</h4>
              From Muppets to Mastery: Core UX Principles from Mr. Jim Henson
            </a>
          </td>
        </tr>
      </tbody>
    </table>
    ​
  8. حالا که جدول‌های ما در حال شکل گرفتن هستند، وقت آن است که کمی استایل به آن‌ها اضافه کنیم. اجازه دهید کار را با اضافه کردن چند استایل کلی به عنصرهای <th> و <td> شروع می‌کنیم.

    برای هر دو عنصرهای <th> و <td>، اجازه دهید یک padding پایین با مقدار 22 پیکسل و یک تراز عمودی با مقدار top اضافه کنیم. برای عنصرهای <th> اجازه دهید یک padding سمت راست با مقدار 45 پیکسل، یک تراز متن با مقدار right و یک width با مقدار 20% اضافه کنیم. سپس، برای عنصرهای <td> یک width با مقدار 30% اضافه می‌کنیم.

    در زیر، کد جدول موجود و استایل‌های زمان‌بندی را مشاهده می‌کنید:
    th,
    td {
      padding-bottom: 22px;
      vertical-align: top;
    }
    th {
      padding-right: 45px;
      text-align: right;
      width: 20%;
    }
    td {
      width: 40%;
    }
    ​
  9. سپس، اجازه دهید به سر یا head جدول و عنصرهای داخل سر یا head جدول چند استایل اضافه کنیم. پس یک line-height با مقدار 44 پیکسل به عنصر <thead>، یک color با مقدار 648880# و یک font-size با مقدار 24 پیکسل به تمام عنصرهای <th> تودرتو در داخل عنصر <thead> اضافه می‌کنیم. استایل‌های جدید ما به این شکل خواهند بود:
    thead {
      line-height: 44px;
    }
    thead th {
      color: #648880;
      font-size: 24px;
    }
    ​
  10. سر یا head جدول ظاهر خوبی به دست آورد، بنابراین اجازه دهید همچنین چند استایل به بدنه جدول نیز اضافه کنیم. کار را با عنصرهای تودرتوی <th> در داخل عنصر <tbody> شروع می‌کنیم: color آن‌ها را تغییر می‌دهیم، چند استایل -font و -text محور اضافه می‌کنیم و چند padding بالا نیز اضافه می‌کنیم.
    tbody th {
      color: #a9b2b9;
      font-size: 14px;
      font-weight: 400;
      padding-top: 22px;
      text-transform: uppercase;
    }​
  11. همچنین چند استایل به عنصرهای <td> تودرتو درون عنصر <tbody> نیز اضافه می‌کنیم، کار با یک مرز و padding‌ بالا شروع می‌کنیم.

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

    انجام این کار، یک padding در کل ۳۰ پیکسلی بین دو ستون ایجاد می‌کند و در عین حال، سایز هر سلول را ثابت نگه می‌دارند. لازم نیست هیچ padding سمت چپ یا راستی به عنصرهای <td> که دو ستون را با هم ترکیب می‌کنند، اضافه کنیم.

    ما تمام این paddingهای افقی را با استفاده از Selectorهای کلاس سودوی last-of-type، :first-of-type: و only-of-type: اضافه می‌کنیم. این selectorهای کلاس سودو خیلی شبیه به Selector کلاس سودوی last-child: که قبلاً در موردش صحبت کردیم، عمل می‌کنند.

    Selector‌ کلاس سودوی first-of-type: اولین عنصر از نوع خودش را درون یک عنصر والد انتخاب می‌کند. در مثال ما، selector با نام td:first-of-type اولین عنصر <td> داخل یک عنصر <tr> را انتخاب خواهد کرد. سپس، Selector کلاس سودوی last-of-type: آخرین عنصر از نوع خودش را درون یک عنصر والد انتخاب خواهد کرد.

    دوباره، در مثال ما، selector‌به نام td:last-of-type آخرین عنصر <td> درون یک عنصر <tr> را انتخاب می‌کند. در آخر، Selector کلاس سودوی only-of-type:، یک عنصر را در صورتی انتخاب می‌کند که تنها عنصر موجود از نوع خودش در داخل یک عنصر والد باشد.

    در اینجا، selector‌به نام td:only-of-type فقط یک عنصر <td> را انتخاب می‌کند، آن هم به این شرط که تنها عنصر <td> موجود درون یک عنصر <tr> باشد، درست مثل زمانی که یک عنصر <td> دو ستون را با هم ترکیب می‌کند.

    استایل‌های ما کمی پیچیده هستند، اما در اشاره کردن به نیازهای جدولمان بسیار انعطاف پذیرند. این استایل‌های جدید به شکل زیر هستند:
    tbody td {
      border-top: 1px solid #dfe2e5;
      padding-top: 21px;
    }
    tbody td:first-of-type {
      padding-right: 15px;
    }
    tbody td:last-of-type {
      padding-left: 15px;
    }
    tbody td:only-of-type {
      padding-left: 0;
      padding-right: 0;
    }
    ​
  12. زمان‌بندی ما (و جداولی که آن‌ها را نمایش می‌دهند) در حال قرار گرفتن در کنار یکدیگر هستند. اجازه دهید چند استایل به عنصرهای موجود اضافه کنیم تا طراحی را تمیز و مرتب کنیم. کار را با خاکستری روشن کردن تمام لینک‌های داخل جدول شروع می‌کنیم.

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

    در عین حال که استایل‌های ورودی‌ها برای سخنرانی‌ها را تنظیم می‌کنیم، اجازه دهید همچنین margin پایین در عنصرهای <h4> داخل جدول را حذف کنیم، این کار باعث می‌شود نام سخنگو به عنوان سخنرانی‌اش نزدیک‌تر شود. می‌توانیم این استایل‌ها را با کد زیر پیاده‌سازی کنیم:
    table a {
      color: #888;
    }
    table h4 {
      margin-bottom: 0;
    }
    ​
  13. در آخر، اجازه دهید چند تضاد بصری بین انواع مختلف فعالیت‌هایی که در طول روز اتفاق می‌افتند ایجاد کنیم. همه سخنرانی‌ها به خاطر تغییرات اخیر ظاهر خوبی به دست آوردند.

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

    این کار را با ایجاد یک کلاس جدید به نام schedule-offset و اختصاص color با مقدار a9b2n9 # به آن انجام می‌دهیم.
    .schedule-offset {
      color: #a9b2b9;
    }
    ​

    وقتی کلاس ایجاد و تنظیم شد، آن را به تمام عنصرهای <td> که دو ستون را ترکیب می‌کنند اضافه می‌کنیم و تاریخ روز و یا یک فعالیت مشخص شده را نیز درج می‌کنیم (مثل ثبت‌نام، نهار یا استراحت). حالا دوباره به جدولمان برای روز اول نگاه می‌کنیم (یعنی روز کارگاه)، کد HTML آن به این شکل است:
    <table>
      <thead>
        <tr>
          <th scope="row">
            Workshops
          </th>
          <td class="schedule-offset" colspan="2">
            August 24th
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            <time datetime="08:30:00">8:30 AM</time>
          </th>
          <td class="schedule-offset" colspan="2">
            Registration
          </td>
        </tr>
        ...
        <tr>
          <th scope="row">
            <time datetime="12:30:00">12:30 PM</time>
          </th>
          <td class="schedule-offset" colspan="2">
            Lunch
          </td>
        </tr>
        ...
      </tbody>
    </table>
    ​

جداول (که در ظاهر به نظر خیلی آسان و ساده می‌آیند)، می‌توانند بسیار پیچیده باشند و در مورد صفحه زمان‌بندی وبسایت Styles Conference ما واقعاً هم همین‌طور شد. خبر خوب این است که زمان‌بندی ما حالا کامل شد و ظاهرش هم عالی به نظر می‌رسد.

صفحه زمان‌بندی، که شامل چندین جدول برای وبسایت Styles Conference است

شکل ۲۲.۱. صفحه زمان‌بندی، که شامل چندین جدول برای وبسایت Styles Conference است.

دمو و کد منبع

در زیر، می‌توانید وبسایت Styles Conference را در وضعیت فعلی‌اش مشاهده کنید و همچنین می‌توانید کد منبع وضعیت فعلی وبسایت را نیز دانلود کنید.

لینک مشاهده وبسایت Styles Conference                  کد منبع وبسایت Styles Conference

خلاصه

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

بحث در مورد جداول آخرین بحث مفصل و سخت ما در آموزش مقدماتی HTML و CSS بود و الآن رسماً وبسایت 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 در جلسه قبلی بررسی شد. این مبحث که ...

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

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

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