آشنایی با تگ جدول در html و استایل دهی به آن

با نام و یاد خدای مهربون. سلام خدمت تمام کاربران عزیز
در این جلسه می خواهیم با یک تگ پرکاربرد به نام تگ جدول در html آشنا شویم.در حین آموزش این تگ ها با یه سری کدهای css هم آشنا خواهیم شد.

به مرور زمان که با این تگ ها آشنا شدید، چندتا مثال کاربردی براتون می زنیم تا برای طراحی سایت هاتون ایده بگیرید.خب بریم سر اصل مطلب!

در آموزش زیر به سوالات زیر پاسخ می دهیم:

  • چطوری در html جدول ایجاد کنیم؟
  • چگونه برای المان ها کادر ایجاد کنیم؟
  • چگونه به المان ها عرض و ارتفاع بدهیم؟
  • چگونه خونه های جدول را ادغام کنیم؟

با ما همراه باشین  ;-) 

تگ های جدول

برای ایجاد جدول و سطرها و ستون هایش از چند تگ استفاده می شود که ابتدا آن ها را نام می بریم و سپس ساختار آن را می بینیم:

<table></table> :جدول را با این تگ تعریف می‌کنیم.

<tr></tr> : هر یک از ردیف‌های جدول را  با این تگ ایجاد می کنیم.

<th></th> :عناوین سطر اول جدول (یا همون سلول های ردیف اول) را با این تگ  ایجاد می کنیم.(به صورت پیش‌فرض، تیتر جداول به صورت پررنگ می باشد و در مرکز قرار دارند).

 <td></td> : و نهایتا هر سلول‌ جدول را  با این تگ تعریف می کنیم. (می توانیم هر المانی مثل متن یا تصویر یا لینک یا هر چیز دیگری درون این تگ قرار بدهیم.)

خب بریم سراغ یک مثال خیلی ساده.

گام اول) نوشتن کدهای html 

کدهای زیر در یک سند  html وارد می کنیم:

<!DOCTYPE html>
<html  lang=”fa” dir=”rtl”>
    <head>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
<meta charset=”utf-8″>
      <title>
          اینجا عنوان سایت است
      </title>
   </head>
   <body>
        <p> نوشتن هر متنی که دلتون میخواد</p>
       <table>
         <tr>
              <th>عنوان اول</th>
              <th>عنوان دوم</th>
              <th>عنوان سوم</th>
        </tr>
        <tr>
             <td>متن اول</td>
             <td>متن دوم</td>
             <td>متن سوم</td>
        </tr>
        <tr>
            <td>متن اول</td>
            <td>متن دوم</td>
            <td>متن سوم</td>
       </tr>
</table>
  </body>
</html>

خب فکر نمی کنم نیاز توضیح اضافی تر باشد فقط اینکه به هر تعداد <th> داشته باشیم به همان تعداد باید <td>  در هر ردیف داشته باشیم . سند را ذخیره می کنیم و آن را اجرا می کنیم.(توجه داشته باید که هنوز در سند css چیزی ننوشتیم)

ایجاد جدول در html

گام دوم) نوشتن کدهای CSS 

خب به بهانه استایل دهی به جدولمون با چند property در CSS آشنا می شویم.

ویژگی border :

برای ایجاد کادر برای هر المانی در CSS از خاصیت  border (به معنای لبه) استفاده می کنیم. با 3 مقدار به صورت کامل مشخص می شود:

  • مشخصه اول (1px): ضخامت حاشیه رو مشخص می کند
  • مشخصه دوم: مشخص می کند که حالت کادر چگونه باشد، (solid) یعنی خط به هم پیوسته است ، (dotted) یعنی کادر به شکل خط ممتد باشد .
  • مشخصه سوم: رنگ حاشیه را مشخص می کند.

برای استایل دهی به جدولی که در سند html ایجاد کردیم، وارد فایل  style.css می شویم  و با نوشتن کدهای زیر ، برای سلول های جدول کادر ایجاد می کنیم:

th,td{
                border : 1px solid red;
}

نکته:  اگر بخواهیم به دو تا المان یا تگ را  یک استایل یکسان بدهیم آن ها را کنار هم می نویسیم و با کاما از هم جدا می کنیم.

نتیجه:

ایجاد جدول و استایل دهی به آن با صفاتی مثل bordr

ویژگی border-collapse: 

خب اگر بخواهیم کادرهای سلول های جدول بهم بچسبند ، برای المان table ، از خاصیت border-collapse استفاده می کنیم.

  • collapse : فاصله بین کادرهای جدول حذف می شود.
  • separate: به صورت پیش فرض این مقدار می باشد و بین کادرها فاصله ایجاد می کند.

table{

                border-collapse:collapse;

}

نتیجه:

ایجاد جدول و استایل دهی به آن با صفتی مثل border-collapse

ویژگی width ، height:

برای اینکه ارتفاع و عرض محتوای یک عنصر را تعیین کنیم از ویژگی های height و width استفاده می شود. این خصوصیت مقادیر مختلفی دارد که معمول ترین آنها دو نوع می باشد:

  • به صورت  طولی( مثلا 100px)
  • به صورت درصدی :یعنی چند درصد والد خود را فرابگیرد.(والد و فرزند رو بعدا در بحث های بعدی متوجه خواهید شد) الان که بنویسیم 100% یعنی جدول به اندازه مرورگر رشد کند.(عرض مرورگر هر مقدار  باشد ، جدول به همان اندازه رشد می کند)

خب حالا می خواهیم المان جدول تمام عرض مرورگر را بگیرد، به صورت زیر مقدار width را 100% می دهیم.

table{
                border-collapse:collapse;
                width:100%;
}

نتیجه:

ایجاد جدول در html و استایل دهی به آن با صفت width و height

ویژگی text-align :

با استفاده از این ویژگی می توانیم چیدمان محتوای داخل یک المان(مثل متن ، تصویر یا…)  را تعیین کنیم.این خصوصیت مقادیر مختلفی دارد که معمول ترین آنها برای محتوای خطی به شکل زیر می باشد:

  • right: راست چین
  • left:چپ چین
  • center: وسط چین
  • justify: این مقدار هم مانند مقدار justify در word می باشد، باعث می شود تا برای تمام خطوط به جز خط آخر ، محتوا تمام خط را از لبه سمت راست تا لبه سمت چپ کامل پر کند.

در حال حاضر محتوای داخل المان جدول ، متن می باشد. برای اینکه متن های وسط قرار بگیرند. خاصیت text-align را برای المان table تعریف می کنیم.

table{
  border-collapse:collapse;
  width:100%;
  text-align :center;
}

نتیجه:

ایجاد جدول در html و استایل دهی به آن با صفت text-align

صفات تگ سلول های جدول: 

colspan :چند ستون جدول را با هم merge یا ادغام کنیم.

     <table>
        <tr>
             <td  colspan=”2″> متن با عرض دو</td>
        </tr>
        <tr>
            <td>متن اول</td>
            <td>متن دوم</td>
       </tr>
</table>

rowspan :چند ردیف یک جدول را باهم ادغام کنیم از صفت rowspan استفاده می کنیم. 

     <table>
        <tr>
            <td>متن اول</td>
            <td>متن دوم</td>
       </tr>
<tr>
<td  rowspan=”2″> متن با طول دو</td>
</tr>
</table>

این دو مورد هم تست کنید و نتیجه رو ببیند.

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

تگ
<table></table> برای برای ایجاد جدول
<th></th> برای ایجاد سلول های عنوان جدول
<tr></tr> برای ایجاد سطر
<td></td> برای ایجاد سلول
property در css
نام مقادیر
 توضیح
border dotted – solid مشخص کردن کادر برای المان
border-collapse collaspe-separate ایجاد یا حذف فاصله بین کادرها
width و height درصدی یا مقدار طولی برای مشخص کردن عرض و ارتفاع المان
text-align right-left-center-justify مشخص کردن چیدمان محتوای داخل المان
صفات تگ td
نام مقادیر
 توضیح
colspan مقدار عددی ادغام ستون های جدول
rowspan مقدار عددی ادغام ردیف های جدول

در آموزش بعدی با تگ a در html و صفات آن و همچنین نحوه استایل دهی به آن آشنا خواهیم شد.

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-) 

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 30 امتیاز: 4.4]