تگ مربوط به ایجاد جدول در وب سایت ( ساده ولی کاربردی html – قسمت 18 )

در این پست از سایت اسکریپت دات کام و ادامه سری آموزش های ساده ولی کاربردی زبان html , میرسیم به تگ table که برای ایجاد جداول در وب سایت می باشد.

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

در زمان های قدیم از این تگ برای دیزاین کامل یک وب سایت استفاده میشد که با آمدن تگ های div و span ( که در ادامه سری آموزشی به آنها اشاره خواهم کرد ) , منسوخ شد و در حال حاضر فقط برای ایجاد جداول در وب سایت مورد استفاده قرار میگیرد .

تگ table : این تگ به صورت block Level و Container می باشد و به تنهایی هیچ مفهومی ندارد , مگر با وجود 2 تگ tr و td که در داخل آن قرار میگیرند .

تگ tr : این تگ مخفف Table row هست که به صورت Container میباشد . مثلا برای داشتن 2 سطر , باید دو بار tr استفاده کرد .

تگ th : این تگ مخفف Table Heading هست که به صورت Container می باشد .  کاربرد این تگ اختیاری برای معرفی عنوان هر ستون می باشد .

تگ td : این تگ مخفف Table Data هست که به صورت Container میباشد .این تگ به معنای همان ستون میباشد که حتما باید داخل tr قرار گیرد . مثلا اگر 2 بار داخل tr تکرار شود , به این معنا میباشد که یک ردیف دو ستونه داریم .

تگ caption : این تگ هم به صورت Container میباشد و نوشته ای که درون آن قرار میگیرد مشخص کننده عنوان کلی جدول می باشد . البته این تگ هم به صورت اختیاری می باشد و بعد از باز شدن تگ table قرار میگیرد . به عنوان مثال اگر جدول قیمت ماشین های سایپا را بخواهید در سایت قرار دهید , میتوانید در داخل این تگ بنویسید : مقایسه قیمت ماشین های سایپا

نکته : تگ های caption و th از جمله تگ های اختیاری می باشد که اگر از آنها استفاده کنید , خاصیت سئویی بسیاری دارد و کمک به ارتقا رتبه ( صفحه سایت ) شما در موتور های جستجو خواهد کرد.

توجه : ساخت یک جدول بدون داشتن سه تگ بالا tr , table و td هیچ معنایی ندارد و ساخته نمی شود . ضمنا نوشته های داخل جداول فقط باید داخل td و th قرار گیرد .

مثلا برای داشتن یک جدول 2*2 به روش زیر عمل میکنیم .

نکته مهم : برای دیزاین جدول , اعم از حاشیه , خط کشی , فاصله و … از css استفاده میکنیم . این تگ دارای Attribute هایی در این رابطه هست اما تمامی آنها در html5 منسوخ شده است.

<table>
    <caption>مقایسه قیمت های سایپا</caption>
    <tr>
        <th>ماشین</th>
        <th>قیمت</th>
    </tr>
    <tr>
        <td>سایپا 141</td>
        <td>16000000</td>
    </tr>
    <tr>
        <td>سایپا 111</td>
        <td>17000000</td>
    </tr>
</table>

پخش اختصاصی

آموزش : وحید مجیدی