جلسه پنجم: رسم جدول در HTML ، تگ table

رسم جدول در HTML ، تگ table

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

جدولی که در تصویر بالا میبینید، با استفاده از کدهای HTML ساخته شده است. کد مربوط به این جدول را در پایین ببینید:

<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>
    <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
    </tr>
    <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
    </tr>
    <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
    </tr>
</table>

البته در جدول بالا من با استفاده از CSS زمینه بعضی از سطرها رو تغییر دادم و رنگ خطوط جدول رو هم تغییر دادم ولی برای ایجاد جدول کدهای HTML بالا رو مورد استفاده قرار دادم.

در کد بالا یک سری تگ بصورت تکراری استفاده شدن که با یادگیری اونها به راحتی میتونیم یه جدول رو رسم کنیم. کدهایی که برای رسم جدول استفاده میشن باید به ترتیب و به نوبت استفاده بشن تا خروجی مناسب و موردنظرمون رو بدست بیاریم. قطعه کد پایین رو ببینید:

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

کد بالا یک جدول با یک ردیف و 3 ستون ایجاد میکنه. ما با استفاده از همین سه تگ که در این قطعه کد استفاده شده میتونیم یه جدول در HTML بکشیم. تگ های table و tr و td

ما ابتدا تگ table را مینویسیم و در داخل آن اولین ردیف خود را تعریف میکنیم. در داخل این ردیف به تعداد دلخواه ستون اضافه میکنیم. در مرحله بعد به سراغ ردیف بعدی میریم و این کار را تا انتهای جدول ادامه میدیم. بریم یکی یکی با این تگها آشنا بشیم.

تگ table و کاربرد آن برای رسم جدول در HTML

تگ table اصلی ترین و اولین تگ مورد استفاده ما برای رسم جدول در HTML هست. همه ردیف ها و ستون ها داخل این تگ قرار میگیرن. همونطور که در کد بالا دیدید این تگ یک تگ دو قسمتی هست و ابتدا و انتهای کدهای جدول داخل این تگ قرار میگیره.

تگ tr

تگ tr برای رسم یه ردیف استفاده میشه. این تگ داخل تگ table قرار میگیره. به ازای هر ردیف از جدولمون، باید یک بار تگ tr رو باز کنیم و ببندیم. به یاد داشته باشید که ما اجازه نداریم از تگ tr دوباره داخل تگ tr استفاده کنیم. برای رسم ردیف بعدی باید ابتدای تگ tr اول رو ببندیم و بعد تگ tr دوم رو باز کنیم.

تگ td

تگ td برای رسم یه ستون استفاده میشه. این تگ داخل تگ tr استفاده میشه. با توجه به اینکه داخل تگ tr از این تگ استفاده میکنیم و ستون جدید ایجاد میکنیم، در حقیقت هر بار که از این تگ استفاده میکنیم یه سلول و خانه از جدول ما رسم میشه. بنابراین هر محتوایی که در این تگ دو قسمتی بنویسیم، محتوای آن سلول و خانه ما میشود.

در قطعه کد بالا ما یک جدول داریم که یک ردیف دارد (داخل تگ table تگ tr باز شده) و این یک ردیف جدول ما شامل سه ستون است. (سه بار از تگ td برای ایجاد سه ستون استفاده کردیم) در نتیجه ما یک جدول با یک ردیف و سه ستون خواهیم داشت. همونطور که میبینید داخل هر تگ td محتوای اون سلول نوشته شده است.

تگ th

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

ادغام سطرها و ستون های جدول در HTML

گاهی پیش میاد که ما قصد داریم دو یا چند سطر و یا ستون از جدول خودمون رو با هم ادغام کنیم. همانند تصویر زیر:

در جدول بالایی دو ستون از جدول با یکدیگر ادغام شدند (سلولی که مقدار Name در اون نوشته شده) و در جدول پایینی دو ردیف از جدول با یکدیگر ادغام شدند (سلولی که مقدار Phone در اون نوشته شده) ما برای ادغام ستون‌ها از صفت colspan استفاده میکنیم و برای ادغام ردیف ها از صفت rowspan استفاده میکنیم. کدهای دو جدول بالا را ببینید:

<table>
<tr>
    <th colspan="2">Name</th>
    <th>Age</th>
</tr>
<tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
</tr>
</table>

در قطعه کد بالا که مربوط به جدول اول است من در خط سوم صفت colspan تگ th رو برابر 2 قرار دادم. این کار باعث میشه که این تگ th به اندازه دو ستون فضا اشغال کنه.

<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>

در قطعه کد بالا که مربوط به جدول دوم است من در خط هفتم صفت rowspan تگ th رو برابر 2 قرار دادم. این کار باعث میشه که این تگ th به اندازه دو ردیف فضا اشغال کنه. اگر دقت کنید در داخل تگ tr بعدی ما فقط یک تگ td داریم به این دلیل که فضای یک ردیف دیگر رو در خط هفتم به اون ردیف اختصاص دادیم.

در ویدیو این جلسه با مثال عملی این موارد رو بیشتر توضیح دادم.

همه ویدیوهای دوره آموزش HTML