جدول در استایل

فصل قبل نحوه ایجاد جداول با استفاده از HTML5 را توضیح می دهد.

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

حاشیه جدول

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

جدول و اطراف سلول های جداگانه در جدول. شما این کار را با مرز CSS انجام می دهید.

ویژگی:

table {border: 1px solid black;}

اولین مقدار در ویژگی border (1px) عرض حاشیه است. دومین مقدار (جامد) نوع حاشیه است. می توانید خط چین، نقطه چین، دوتایی یا را مشخص کنید جامد برای نوع حاشیه. مقدار سوم (مشکی) رنگ حاشیه را مشخص می کند.

می توانید حاشیه هایی را در اطراف هر یک از عناصر خانواده جدول اضافه کنید – جدول، th، tr، یا td. با این حال، اگر ویژگی border را برای همه آنها مشخص کنید، دو برابر خواهید دید مرزهای اطراف سلول های فردی برای جلوگیری از این اتفاق، ویژگی border-collapse را به قانون اضافه کنید و مقدار آن را روی collapse تنظیم کنید.

اگر می خواهید فقط خطوط افقی را بین ردیف های جدول نشان دهید، می توانید از آن استفاده کنید ویژگی border-bottom برای عنصر tr. این فقط مرزهایی را در پایین هر ردیف ایجاد می کند. این مراحل را برای اضافه کردن حاشیه در اطراف جدول دنبال کنید:

1. فایل mytable.html را که در فصل قبل ایجاد کردید در ویرایشگر متن، ویرایشگر برنامه یا بسته IDE مورد علاقه خود باز کنید. اگر هنوز فصل 1 این مینی‌کتاب را نخوانده‌اید، باید قبل از ادامه این مراحل، به عقب برگردید و حداقل در بخش جداول کار کنید. منتظرت می مانم!

2. یک عنصر سبک به بخش سر سند اضافه کنید تا قانون استایل بندی جدول را تعریف کنید:

<style>

table tr td {

border: 1px solid black;

border-collapse: collapse;

}

</style>

شامل ویژگی فروپاشی مرز برای جلوگیری از مرزهای دوگانه از ظاهر شدن

3. فایل را ذخیره کنید.

4. نرم افزار وب سرور خود را راه اندازی کنید، مرورگر خود را باز کنید و به URL زیر بروید:

http://localhost:8080/mytable.html

5. مرورگر را ببندید و نرم افزار وب سرور خود را متوقف کنید.

همانطور که در شکل 2-5 نشان داده شده است، با استایل‌های اضافه شده، باید یک خط حاشیه در اطراف هر سلول جدول و یک خط حاشیه در اطراف کل جدول مشاهده کنید.

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

داده های جدول

مرورگر به طور پیش فرض سلول های جدول را ایجاد می کند به اندازه ای بزرگ است که بیشترین مقدار داده را در سلول ها داشته باشد. این می تواند یک میز تا حدودی تنگ را ایجاد کند. خوشبختانه، می توانید با استفاده از برخی ویژگی های اضافی CSS، کمی فضای بیشتری در اطراف داده ها در سلول های جدول اضافه کنید.