توی این جلسه از آموزش HTML میخوایم به مبحث جدول ها در HTML بپردازیم . جدول کشیدن توی HTML کار زیاد پیچیده ای نیست . فقط یه سری اصول و ساختار داره هر جدول که باید رعایت بشه تا جدول به درستی خروجی بشه . از جدول ها میتونیم استفاده های زیادی تو ماقصد برنامه نویسی بعدی انجام بدیم .
جالبه که بدونید تا چندین سال پیش از جداول برای طراحی وب سایت استفاده میکردن و خیلی داغون بود همه چی و بعدها تگ div معرفی شد و مباحث رسپانسیو اومد وسط و جدول ها استفاده قدیم رو از دست دادن. تقریبا دهه ۸۰ این اتفاق رخ داد و جدول های برای طراحی وب سایت منسوخ شدن و فقط برای جدول کشیدن از اون ها استفاده میشه .
مثال زیر رو مشاهده کنین میبینین که یه یه جدول ترسیم شده و بعد از اون کدهای این جدول رو براتون نشون دادیم :
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
خیلی ساده بخوایم بگیم روش کدهای جدول این طوری هست که اول تگ table رو باز میکنیم که به مرورگر بگیم میخوایم جدول بکشیم. حالا تو جدول ما ردیف داریم. ردیف اول دوم سوم تا … هر چقدر که دلمون بخواد ردیف نشون بدیم. هر ردیف هم با تگ tr که خلاصه شده table row هستش ظاهر میشه. حالا میخوایم بگیم ردیف اول عنوان هر ستون ما چی هست !؟ برای ردیف اول که میخوایم این عناوین رو یکبار استفاده کنیم و به کاربر بگیم عنوان ستون ها چی هست از th که خلاصه شده table header هست استفاده میکنیم . برای ردیف های دو به بعد هم به جای اینکه بیایم از th استفاده کنیم چون باید مقدار نویسی کنیم از td استفاده میکنیم که میشه همون table data که مقادیر اون ردیف و ستون توی اون سلول قرار میگیره .
توی تگ سلول یا همون td همه چی میتونیم بذاریم ! متن باشه عکس باشه لینک باشه یا هرچیزی … کاملا بستگی به خودمون داره .
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
ردیف ها هم میتونیم با tr که بالا معرفی کردیم نشون بدیم و توی هر ردیف هم میتونیم ستون های متفاوتی داشته باشیم ! که در ادامه مباحث کاملا توضیح میدیم بهتون .
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
باز هم تکرار میکنیم که فراموشتون نشه . اگر بخوایم جایی از جدول از عنوان برای ستون استفاده کنیم میتونیم بیایم از th استفاده کنیم. دوستان فقط یک نکته ای رو بگیم که خود مرورگر میاد متنی که توی این تگ میذارین یعنی th رو بولد میکنه و وسط چین میکنه. اگر بخواید قیافه ظاهری این تگ رو عوض کنین باید حتما از استایل نویسی در CSS و یا از روش هایی که توی جلسات قبلی یادتون دادیم استفاده کنین.کد زیر رو ببینین:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
چند تا نکته بگیم بهتون. برای جدول ها میتوین حاضیه درست کنیم به حالت های فراوان و رنگ های متفاوت ! تی دوره آموزش HTML زیاد وقتتون رو نمیگیریم و توی دوره آموزش CSS کاملا توضیح میدیم که چجوری میشه تمام این کارها رو انجام داد. الان وقت آموزش HTML هستش.
تغییر ستون ها در ردیف جدول های در HTML
اگر با نرم افزار مایکروسافت اکسل کار کرده باشین میدونین یه چیزی وجود داره بنام merge کردن سلول ها! توی این قسمت میخوایم این مورد رو یاد بدیم که چجوری تعداد ستون های یک ردیف رو تغییر بدیم . خیلی خیلی ساده است ! فقط کافیه یه ویژگی اختصاص بدیم به اون المان هدر مثلا و مقادیر ستون ها رو توی اون تعریف کنیم . اون ویژگی هم اسمش colspan هستش و مقدار ویژگی هم میتونیم تعداد ستون ها رو درج کنیم داخلش. مثال زیر رو ببینین :
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
و اما خروجی این کد چی میشه !؟ در قسمت زیر مشاهده میکنین !
| Name | Age | |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
همون طوری که میبینین ردیف اول ستون name اومده دو تا ستون رو پر کرده و دیگه ستون اضافه نکرده و یهو اومده توی ستون age در حالت پیش فرض اگر این کد ویژگی رو نذاریم یه ستون خالی داریم و اون هم ستون آخر هستش ! یعنی ستون اول میاد میشه name دومی میشه age و سومی خالی میوفته :
| Name | Age | |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
توی مثال خروجی بالا میبینیم که ستون سومی در قسمت هدر جدول خالی استفاده و هیچی لود نشده. حالا اگر بخوایم چندتا ردیف هم تو هم مرج merge کنیم باید چیکار کنیم !؟ همین ویژگی با یه اسم دیگه هست rowspan از اون استفده میکنیم تا چندتا ردیف هم با هم دیگه یکی بشن . مثال زیر رو ببینین :
| Name | Jill |
|---|---|
| Phone | 555-1234 |
| 555-8745 |
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
تگ caption در جدول های HTML
این تگ هم برای نوشتن عناون جدول استفاده میشه که میگه جدول چی هست !؟ توی کتاب های خیلی دیدیم که مثلا میزنه جدول شماره ۱ . این شماره ۱ رو میتوینم بیایم توی caption بنویسیم و جدول ماهیت پیدا میکنه . برای نوشتن caption هم فقط کافیه تا تگ caption رو باز و بسته کنیم و داخلش متن مورد نظرمون رو بنویسیم و بوم ! به همین راحتی جدول ما اسم میگیره .
| Month | Savings |
|---|---|
| January | $100 |
| February | $50 |
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
