آشنایی با جداول در html و css

آشنایی با جداول

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

که امکان خوانایی آسان را برای مخاطبین فراهم می‌کند.

زمانی که امکان استفاده از جداول در HTML فراهم شد، زبان CSS به صورت گسترده مورد استفاده نبود.

از این رو در آن زمان وبسایت‌ها بیشتر برپایه جداول ایجاد می‌شدند.

جداول برای مختصات‌دهی به محتوا و همچنین چیدمان عناصر داخل صفحه مورد استفاده قرار می‌گرفت.

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

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

و در عین حال از CSS برای منظم ساختن عناصر داخل صفحه و چیدمان عناصر به صورت گسترده استفاده می‌شود.

ساخت جداول در HTML همچنان یک چالش است.

طریقه ساخت جدول به صورت عمده به اطلاعات و نحوه نمایش آن بستگی دارد.

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

ساخت جدول

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

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

برای تعریف یک سلول داده جهت نمایش اطلاعات باید از تگ <td> استفاده شود.

<table style=”width:100%”>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>Ali</td>

<td>Esmaeili</td>

<td>20</td>

</tr>

<tr>

<td>Pouria</td>

<td>AriaFar</td>

<td>1228</td>

</tr>

</table>

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

اضافه کردن حاشیه

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

table, th, td {

border: 1px solid black;

}

حاشیه تک خطی

برای تعیین حاشیه جداول و سلول‌های آن با یک خط باید از خاصیت border-collapse موجود در CSS استفاده کنید.

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

تعریف cell padding برای خانه های جدول

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

برای تعیین فاصله سلولی باید از خاصیت padding موجود در CSS استفاده کنید.

th, td {

padding: 15px;

}

کد فوق به داخل خانه های جدول شما 15 پیکسل فاصله اضافه میکند. (بالا – راست – پایین – چپ)

نمایش اطلاعات چپ به راست

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

th {

text-align: left;

}

فاصله بین حاشیه

فاصله بین حاشیه در واقع فاصله‌های بین سلول ها را تعیین می‌کند. برای تغییر فاصله بین سلول‌ها باید از خاصیت border-spacing موجود در CSS استفاده کنید.

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

table {

border-spacing: 5px;

}

کپشن جدول

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

<table style=”width:100%”>

<caption>Monthly savings</caption>

<tr> <th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>Farvardin</td>

<td>100 Tooman</td>

</tr>

<tr>

<td>Mehr</td>

<td>50 Tooman</td>

</tr>

</table>

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

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

خاصیت colspan برای تحت پوشش قرار دادن یک سلول در بین چند ستون است و خاصیت rowspan برای زیر پوشش قرار دادن یک سلول در بین چند ردیف.

هر خاصیت یک مقدار عدد صحیح را برای تعداد سلول‌هایی که تحت پوشش قرار می‌دهد قبول می‌کند. عدد 1 به صورت پیش فرض در این دو خاصیت تعریف شده است.

آموزش Box در CSS

تمامی عناصر HTML را می توان box در نظر گرفت. در CSS ، عبارت ” Box Model ” هنگام صحبت در موردdesign و layout استفاده می شود.

CSS Box Model ، الزاما یک box است که دور عناصر HTML را می گیرد، و تشکیل شده است از حاشیه ها،قاب ها border) ، padding )، و محتوای واقعی.

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

توضیح بخش های مختلف

• margin نواحی اطراف border را پاک می کند. margin رنگ پیش زمینه ندارد، و کاملا شفاف است
• order یک border اطراف padding و content را می پوشاند. border ، از رنگ پیش زمینه boxتاثیر می گیرد
• padding نواحی اطراف content را پاک می کند. padding از رنگ پیش زمینه box تاثیر می گیرد
• content محتوای box ، یعنی جایی که متن و تصاویر ظاهر می شوند

به منظور تنظیم صحیح پهنا و ارتفاع عنصر در همه مرورگرها، باید بدانید box model چگونه کار می کند.

پهنا و ارتفاع عنصر

نکته مهم هنگامی که خصیصه پهنا و ارتفاع عنصر را با CSS تعیین می کنید، فقط پهنا و ارتفاع ناحیه contentرا تعیین می کنید. به منظور درک اندازه عنصر، همچنین باید padding ، border ، و margin را نیز اضافه کنید.
کل پهنای عنصر در مثال زیر، 300px است

Width:250px;

Padding:10px;

Border:5px solid gray;

Margin:10px;

بیایید محاسبه ریاضی اش را هم انجام دهیم.

250px (پهنا)
+ 20px (چپ و راست padding )
+ 10px(چپ و راست border )
+ 20px (چپ و راست margin )
= 300px

تصور کنید فقط 250px فضا دارید. بیایید عنصری با پهنای کل بسازیم

Width:220px;

Padding:10px;

Border:5px solid gray;

Margin:0px;

کل پهنای عنصر همیشه باید بصورت زیر برگزار شود

کل پهنای عنصر = پهنا + padding چپ + padding راست + border چپ + border راست + margin چپ +margin راست

کل ارتفاع عنصر نیز باید بصورا زیر محاسبه شود

کل ارتفاع عنصر = ارتفاع + padding بالا + padding پایین + border بالا + border پایین + margin بالا +margin پایین

تگ های جدول

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

خصوصیات ویژه تگ <table> در HTML 

نتیجه گیری

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

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

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده: حانیه گل لاله کرمانی