1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

آموزش css/ظاهر جداول/خاصيت caption-side

شروع موضوع توسط Amon Amarth ‏16/4/13 در انجمن CSS

  1. کاربر ارشد

    تاریخ عضویت:
    ‏7/6/12
    ارسال ها:
    12,082
    تشکر شده:
    28,151
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    آموزش css/ظاهر جداول/خاصيت caption-side


    [h=3] خاصيت caption-side [/h] [TABLE="class: pr, width: 100%"]
    [TR]
    [TD="class: prname"] نام خاصيت
    [/TD]
    [TD="class: prname"] نوع خاصيت
    [/TD]
    [TD="class: prdes"] شرح
    [/TD]
    [/TR]
    [TR]
    [TD="class: prbody"] caption-side [/TD]
    [TD="class: prbody"] top
    right
    bottom
    left [/TD]
    [TD="class: prbody"] اين خاصيت موقعيت قرار گيری عنوان جدول را تعيين می کند . عنوان جدول توسط تگ < caption > ايجاد می شود . حالت های ممکن عبارتند :
    - top : عنوان در بالای جدول قرار می گيرد .
    - right : عنوان در سمت راست جدول قرار می گيرد .
    - bottom : عنوان در پايين جدول قرار می گيرد .
    - left : عنوان در سمت چپ جدول قرار می گيرد . [/TD]
    [/TR]
    [/TABLE]
    مثال : در مثال زير چند حالت قرار گيری عنوان جدول را بررسی کرده ايم :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < table style="border: solid 2px blue; caption-side: left ; width: 400px" >
    < caption > Table 1 , Caption left < /caption >
    < tr >
    < td style="border: solid 2px blue" >
    Cell 1
    < /td >
    < td style="border: solid 2px blue" >
    Cell 2
    < /td >
    < /tr >
    </table>


    < table style="border: solid 2px blue; caption-side: bottom ; width: 400px" >
    < caption > Table 2 , Caption bottom < /caption >
    < tr >
    < td style="border: solid 2px blue" >
    Cell 1
    < /td >
    < td style="border: solid 2px blue" >
    Cell 2
    < /td >
    < /tr >
    </table>


    < table style="border: solid 2px blue; caption-side: top ; width: 400px" >
    < caption > Table 3 , Caption top < /caption >
    < tr >
    < td style="border: solid 2px blue" >
    Cell 1
    < /td >
    < td style="border: solid 2px blue" >
    Cell 2
    < /td >
    < /tr >
    </table>
    [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] [TABLE="width: 400"]
    Table 1 , Caption left [TR]
    [TD] Cell 1 [/TD]
    [TD] Cell 2 [/TD]
    [/TR]
    [/TABLE]

    [TABLE="width: 400"]
    Table 2 , Caption bottom [TR]
    [TD] Cell 1 [/TD]
    [TD] Cell 2 [/TD]
    [/TR]
    [/TABLE]

    [TABLE="width: 400"]
    Table 3 , Caption top [TR]
    [TD] Cell 1 [/TD]
    [TD] Cell 2 [/TD]
    [/TR]
    [/TABLE]
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]

    منبع: developer1
     
    یک شخص از این تشکر کرد.