آموزش برنامه نویسی وب🌐: بخش html قسمت پنجم (اتمام جداول در اچ تی ام ال)

در قسمت قبلی، جداول و ویژگی های مربوط به قلم در CSS رو یاد گرفتیم.

در این قسمت قصد داریم جدول ها رو بطور کامل یاد بگیریم

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

قسمت قبلی (چهارم) gang Programmer

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

خب بریم سراغ آموزش این قسمت.....

سایز بندی جداول

عرض ستون جدول ها رو میتوان با صفت width تعیین کرد. برای مثال میتوان بعنوان مقدار به این صفت مقادیر زیر رو داد.

70%: 70 درصد عرض جدول رو میگیرد
70px: عرض ستون جدول 70 پیکسل میشود.
...

به مثال زیر توجه کنید که جدول صد در صد عرض صفحه رو میگیرد و ستون اول 70 درصد جدول را میگیرد.


<table width='100%' border='5px'>
   <tr>
       <th width='70%'>Column 1</th>
       <th>Column 2</th>
       <th>Column 3</th>
   </tr>
   <tr>
       <td>test 1</td>
       <td>test 2</td>
       <td>test 3</td>
   </tr>
   <tr>
       <td>test 4</td>
       <td>test 5</td>
       <td>test 6</td>
   </tr>
</table>

برای تغییر عرض یا ارتفاع یک سطر یا ستون فقط کافی صفت width با مقدار عرض دلخواهمون یا height با ارتفاع دلخواهمون به یکی از سلول های اون سطر یا ستون بدیم.

در مثال بالا th دوم در tr اول که عنوان ستون دوم است صفت width رو با مقدار 70 درصد اعمال کردیم. کد بصورت زیر نمایش داده خواهد شد.

Column 1	Column 2	Column 3
test 1	test 2	test 3
test 4	test 5	test 6

همانطور که در بالا دیدید ستون اول عرض بیشتری (%70) را نسبت به بقیه ستون ها دارد. همین عمل رو میتونید بر روی سطر ها انجام بدید.


<table width='100%' border='5px'>
   <tr>
       <th>Column 1</th>
       <th>Column 2</th>
       <th>Column 3</th>
   </tr>
   <tr>
       <td  height='70px'>test 1</td>
       <td>test 2</td>
       <td>test 3</td>
   </tr>
   <tr>
       <td>test 4</td>
       <td>test 5</td>
       <td>test 6</td>
   </tr>
</table>

عناوین جداول در اچ تی ام ال

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

عناوین فقط در سطر ها

نام	نوح	نامعلوم
نام خانوادگی	عدم موجودیت	بی نام خانوادگی
سن	500	123

عناوین فقط در ستون ها و سطر ها

	شنبه	یکشنبه	دوشنبه
زنگ اول	ورزش	کار و فناوری	تاریخ
زنگ دوم	ریاضی	هنر	علوم

عناوین فقط در ستون ها

شنبه	یکشنبه	دوشنبه
ورزش	کار و فناوری	تاریخ

کد زیر رو بررسی کنید.


<table style="width:30%">
<caption>
عناوین فقط در سطر ها 
</caption>
  <tr>
    <th>نام</th>
    <td>نوح</td>
    <td>نامعلوم</td>
  </tr>
  <tr>
    <th>نام خانوادگی</th>
    <td>عدم موجودیت</td>
    <td>بی نام خانوادگی</td>
  </tr>
  <tr>
    <th>سن</th>  
    <td>500</td>
    <td>123</td>
  </tr>
</table>
<table width='30%'><caption>
 عناوین فقط در ستون ها و سطر ها
</caption>
  <tr>
      <th></th>
    <th>شنبه </th>
    <th>یکشنبه</th>
    <th>دوشنبه</th>
  </tr>
  <tr>
    <th>زنگ اول</th>
    <td>ورزش</td>
    <td>کار و فناوری</td>
    <td>تاریخ</td>
  </tr>
  <tr>
     <th>زنگ دوم</th>
    <td>ریاضی</td>
    <td>هنر</td>
    <td>علوم</td>
  </tr>
</table>
<table width='30%'>
<caption>
عناوین فقط در ستون ها
</caption>
  <tr>
    <th>شنبه </th>
    <th>یکشنبه</th>
    <th>دوشنبه</th>
  </tr>
  <tr>
    <td>ورزش</td>
    <td>کار و فناوری</td>
    <td>تاریخ</td>
  </tr>
</table>

هر جا نیاز به عنوان داریم از تگ th استفاده میکنیم.

تگ caption

تگ caption بالافاصله بعد از ایجاد تگ table نوشته میشود و متنی را در زیر یا بالای جدول نمایش میدهد و معمولا برای توصیف جدول استفاده میشود.

همچنین میتوانیم با استفاده از ویژگی caption-side سی اس اس بالای جدول یا پایین بودن آن را مشخص کنیم. این ویژگیِ سی اس اس هست که در صفت style نوشته میشود و دو مقدار bottom یا top دارد.

style='caption-side:bottom;'
این ویژگی را وقتی به تگ caption اضافه کنیم توضیحات جدول در پایین صفحه نمایش داده میشود و اگر بجای bottom ، top را بزاریم توضیحات جدول در بالای جدول نمایش داده خواهد شد.

تگ های tbody، thead، tfoot

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

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

آموزش ویژگی‌های border-spacing و border-collapse

ویژگی‌های border-spacing و border-collapse در HTML برای تنظیم فاصله بین سلول‌های جدول و کنترل نحوه نمایش خطوط مرزی سلول‌ها استفاده می‌شوند. این دو ویژگی به شما امکان می‌دهند تا ظاهر جداول را به شکل دقیق‌تری سفارشی‌سازی کنید.

ویژگی border-spacing

ویژگی border-spacing برای تعیین فاصله بین مرزهای سلول‌های جدول استفاده می‌شود. به صورت پیش‌فرض، مرورگرها فاصله‌ای بین مرزهای سلول‌های جدول ایجاد می‌کنند، اما شما می‌توانید با استفاده از این ویژگی فاصله را به مقدار دلخواه تغییر دهید. مثالی از استفاده از این ویژگی:

مثال:


        <table style="border-spacing: 15px;"> 

           <tr>

              <td>سلول ۱</td>

              <td>سلول ۲</td>

           </tr>

           <tr>

              <td>سلول ۳</td>

              <td>سلول ۴</td>

           </tr>

        </table>

در این مثال، فاصله‌ی ۱۵ پیکسل بین سلول‌های جدول ایجاد می‌شود. هر چه مقدار `border-spacing` بیشتر باشد، فاصله بین سلول‌ها بیشتر خواهد شد.

ویژگی border-collapse

ویژگی border-collapse مشخص می‌کند که آیا مرزهای سلول‌های جدول جداگانه نمایش داده شوند یا به صورت یکپارچه. مقدار پیش‌فرض این ویژگی separate است که مرزهای هر سلول به صورت جداگانه نمایش داده می‌شوند. اگر بخواهید مرزهای سلول‌ها با هم ادغام شوند، باید از مقدار collapse استفاده کنید. مثالی از این ویژگی:

مثال:


        <table style="border-collapse: collapse;"> 

           <tr>

              <td>سلول ۱</td>

              <td>سلول ۲</td>

           </tr>

           <tr>

              <td>سلول ۳</td>

              <td>سلول ۴</td>

           </tr>

        </table>

با استفاده از border-collapse: collapse;، مرزهای سلول‌ها به هم متصل می‌شوند و فقط یک خط برای مرز بین سلول‌ها نمایش داده می‌شود.

زیباسازی جداول در HTML با استفاده از CSS

مقاله کامل زیبا سازی جداول در اچ تی ام ال
قسمت بعدی