چطوری با html جدول بسازیم ؟

گاهی اوقات برای ایجاد نظم در وبسایت نیاز داریم که از یک فرمت منظم به نام جدول و جدول کشی استفاده کنیم ( با استفاده از افزونه یا html ). تقریبا یک چیزی شبیه به اکسل که خیلی اطلاعات و دیتاها در اون منظم و دقیق دسته بندی میشوند. مثلا شما میخواهید مشخصات محصولتون رو در سایت قرار بدین یا مشخصات یک ماشین.

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

امروز وبیت قراره یک مقاله خیلی مفید (مثل همیشه 🙂 ) براتون منتشر کنه که اگر تا آخر این مقاله رو دنبال کنید به خوبی یاد میگیرید چه موقعی جدول بکشیم و چطوری بسازیمش .

جدول ها چه موقعی پر کاربردند ؟

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

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

چطوری با استفاده از html جدول بسازیم ؟

برای ساخت جدول کافیه که از کدهای زیر که متعلق به html است استفاده کنیم . از تگ Table برای ساخت چهارچوب جدول استفاده میکنیم بخاطر همین کل محتویات جدول باید داخل این تگ قرار بگیرند. از تگ tr برای ساخت سطرها و از td برای ساخت ستون ها استفاده میکنند . همچنین از تگ th برای ساخت عنوان ها در یک جدول استفاده میکنند.

html 

<table style="width:100%">
  <tr>
    <th>نام ماشین</th>
    <th>مدل ماشین</th>
    <th>رنگ ماشین</th>
  </tr>
  <tr>
    <td>پراید</td>
    <td>2020</td>
    <td>سفید</td>
  </tr>
  <tr>
    <td>بی ام وی</td>
    <td>2013</td>
    <td>مشکی</td>
  </tr>
</table>