در مقاله دوم در این ماژول, ما در برخی از ویژگی های پیشرفته تر از جداول متنی نگاه — مانند نوشتن شرح تصاویر و/خلاصه و گروه بندی ردیف خود را به سر جدول, بدن و بالا و پایین صفحه بخش — و همچنین به دنبال در دسترس بودن جداول برای کاربران در دید مشکل.
| پیش نیازها: | اصول اولیه اچ تی ام ال (نگاه کنید به مقدمه ای بر اچ تی ام ال). |
|---|---|
| هدف: | برای یادگیری در مورد ویژگی های پیشرفته تر جدول اچ تی ام ال و دسترسی به جداول. |
اضافه کردن یک عنوان به جدول خود را با
همانطور که شما می توانید از مثال مختصر بالا استنباط, عنوان است که به معنای شامل شرح محتویات جدول. این برای همه خوانندگانی که مایل به دریافت ایده سریع از مفید بودن جدول هنگام اسکن صفحه هستند اما به ویژه برای کاربران نابینا مفید است. کاربر می تواند به عنوان یک عنوان تکیه کند و سپس تصمیم بگیرد که جدول را بیشتر بخواند یا نه.
یادگیری فعال: افزودن عنوان
بیایید این را امتحان کنیم و مثالی را که برای اولین بار در مقاله قبلی ملاقات کردیم مرور کنیم.
- باز کردن جدول زمانی مدرسه معلم زبان خود را از پایان مبانی جدول اچ تی ام ال, و یا ایجاد یک کپی محلی از جدول زمانی ما-ثابت.فایل متنی.
- یک عنوان مناسب برای جدول اضافه کنید.
- کد خود را ذخیره کرده و در مرورگر باز کنید تا ببینید چه شکلی است.
توجه: شما می توانید نسخه ما در گیتهاب پیدا — جدول زمانی عنوان را ببینید.اچ تی ام ال (نگاه کنید به زندگی می کنند نیز).
اضافه کردن ساختار با,, و
به عنوان جداول خود را کمی پیچیده تر در ساختار, مفید است به تعریف ساختاری بیشتر. یکی از راه های روشن برای انجام این کار با استفاده از , , و , که به شما اجازه علامت تا یک هدر, پاورقی, و بخش بدن برای جدول.
این عناصر جدول را بیشتر در دسترس کاربران خواننده صفحه قرار نمی دهند و به تنهایی منجر به بهبود بصری نمی شوند. با این وجود برای یک ظاهر طراحی شده و چیدمان بسیار مفید هستند — به عنوان قلاب های مفید برای افزودن سی اس اس به میز شما عمل می کنند. به شما برخی از نمونه های جالب را, در مورد یک جدول طولانی شما می توانید از هدر جدول و بالا و پایین صفحه تکرار در هر صفحه چاپ, و شما می توانید صفحه نمایش بدن جدول در یک صفحه و مطالب در دسترس با پیمایش بالا و پایین.
- عنصر باید بخشی از جدول است که هدر قرار دادن — این است که معمولا اولین ردیف حاوی سرفصل ستون, اما این لزوما همیشه مورد نیست. اگر شما با استفاده از / عنصر, هدر جدول باید درست در زیر کسانی که.
- عنصر باید قسمتی از جدول را که پاورقی است بپیچد — این ممکن است یک ردیف نهایی با مواردی در ردیف های قبلی باشد که به عنوان مثال خلاصه شده است. همانطور که انتظار دارید می توانید پاورقی جدول را درست در پایین جدول یا درست در زیر سرصفحه جدول قرار دهید (مرورگر همچنان در پایین جدول رندر می کند).
- این عنصر باید قسمتهای دیگر محتوای جدول را که در سرصفحه یا پاورقی جدول نیستند بپیچد. بسته به نحوه تصمیم گیری در ساختار زیر سرصفحه جدول یا گاهی پاورقی ظاهر می شود.
توجه داشته باشید: اگر در کد خود مشخص نکنید همیشه در هر جدول گنجانده شده است. برای بررسی این, باز کردن یکی از نمونه های قبلی خود را که شامل نمی شود و در کد متنی در ابزار توسعه دهنده مرورگر خود را نگاه کنید — شما خواهید دید که مرورگر این برچسب برای شما اضافه شده است. شما ممکن است تعجب که چرا شما باید به زحمت از جمله در همه — شما باید, چرا که به شما می دهد کنترل بیشتری بر ساختار جدول و یک ظاهر طراحی شده خود را.
یادگیری فعال: افزودن ساختار جدول
بیایید این عناصر جدید را عملی کنیم.
- اول از همه, ایجاد یک کپی محلی از هزینه های رکورد.اچ تی ام ال و حداقل جدول.سی اس اس در یک پوشه جدید.
- سعی کنید در یک مرورگر باز کنید — خواهید دید که به نظر می رسد خوب است اما می تواند بهبود یابد. ردیف "مجموع" که شامل مجموع مقادیر صرف شده به نظر می رسد در محل اشتباه است و برخی از اطلاعات از دست رفته از کد وجود دارد.
- قرار دادن ردیف هدر واضح در داخل یک عنصر, "مجموع" ردیف در داخل یک عنصر, و بقیه از محتوای داخل یک عنصر.
- ذخیره و تازه کردن, و شما خواهید دید که اضافه کردن عنصر باعث شده است که "مجموع" ردیف به پایین جدول.
- سپس یک ویژگی کلسپان اضافه کنید تا سلول "مجموع" در چهار ستون اول ایجاد شود تا عدد واقعی در پایین ستون "هزینه" ظاهر شود.
- بیایید یک ظاهر طراحی ساده اضافی به جدول اضافه کنیم تا به شما ایده بدهیم که این عناصر چقدر برای استفاده از سی اس اس مفید هستند. در داخل سر سند متنی خود را, شما یک عنصر خالی را ببینید. در داخل این عنصر خطوط زیر کد سی اس اس را اضافه کنید:
توجه: ما انتظار نداریم که شما را به طور کامل درک سی اس اس در حال حاضر. شما بیشتر در مورد این یاد بگیرند زمانی که شما از طریق ماژول های سی اس اس ما (مقدمه ای بر سی اس اس یک جای خوب برای شروع است; ما همچنین یک مقاله به طور خاص در جداول یک ظاهر طراحی شده).
جدول تمام شده شما باید چیزی شبیه به زیر باشد:
توجه: شما همچنین می توانید در گیتهاب به عنوان هزینه-رکورد-به پایان رسید.اچ تی ام ال (نگاه کنید به زندگی می کنند نیز).
