منو
خانهدیگر

تورفتگی در جدول css

هدف از درس:مقدمه ای بر خصوصیات جدول و اصول چیدمان جدول CSS


بیایید به اصل نگاه کنیم ویژگی های CSSجداول

مرز

یک ویژگی در یک در نظر گرفته می شود و شامل چندین ویژگی به طور همزمان است:

  • سبک مرزی
  • BORDER-WIDTH
  • رنگ لبه

همچنین یک قانون کلی وجود دارد:

table.collapse( border-collapse:collapse; ) table.separate( border-collapse:separate; )

نتیجه:

عرض و ارتفاع
(ارتفاع و عرض میز)

ارزش های:

مثال:

متن تراز کردن
(تراز افقی)

ارزش های:

  • مرکز (مرکز)
  • سمت چپ (در امتداد لبه سمت چپ)
  • سمت راست (لبه سمت راست)
  • توجیه (عرض)

تراز عمودی
(چیدمان عمودی)

ارزش های:

  • خط مبنا (در امتداد خط مبنا)
  • فرعی (به عنوان زیرشاخص)
  • فوق العاده (مانند سوپردیس)
  • بالا (در امتداد لبه بالایی)
  • وسط (در وسط)
  • پایین (در امتداد لبه پایین)
  • % (ارتفاع فاصله خطوط)

مثال:

لایه گذاری
(تورفتگی در جدول)

رنگ پس زمینه (پس زمینه)
رنگ (رنگ متن)

چیدمان جدول CSS

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

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

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

طرح جدولی با دو ستون

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

  • به طور معمول، سمت چپ منو و عناصر اضافی است، و سمت راست قسمت اصلی برای محتوای اصلی است.
  • در این حالت، عرض قسمت سمت چپ به مقدار مشخصی تنظیم می شود، یعنی. به صورت سفت و سخت، و سمت راست قسمت باقی مانده از صفحه را اشغال می کند.
  • در این حالت، باید عرض کل جدول (تگ جدول) را از طریق ویژگی width (100%) به درصد و برای سلول اول (تگ td) عرض (همچنین ویژگی width) را بر حسب پیکسل تنظیم کنید. یا درصدها

    • مثال:قاب اصلی صفحه را از دو ستون تنظیم کنید: اولی - با اندازه ثابت، دومی - برای قسمت باقی مانده از مرورگر. کار را با استفاده از سبک های CSS ()


    کارایی:

    </head> <بدن > <جدول id = "maket" cellpacing = "0" > <tr > <td id = "سمت چپ" > 1</td> <td id = "راست" > 2</td> </tr> </جدول> ...

    1
    ...

    نتیجه:

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

    • مثال:تنظیم پس زمینه سلول های مختلف (برای جدا کردن دو ستون از یکدیگر) و تعیین فاصله بین ستون ها (جداکننده)


    کارایی:
    بیایید ویژگی های سبک جدید را اضافه کنیم:

    /* برای سلول سمت چپ */ td#left( عرض: 200 پیکسل؛ پس‌زمینه: #cccc؛ مرز: 1 پیکسل مشکی یکدست؛ /* مرزها را به‌طور موقت علامت‌گذاری کنید */ ) /* برای سلول سمت راست */ td#right( پس‌زمینه: #fc3;

    با یکدیگر:

    </head> <بدن > <جدول id = "maket" cellpacing = "0" > <tr > <td id = "سمت چپ" > 1</td> <td id = "razdel" > <td id = "راست" > 2</td> </tr> </جدول>

    1

    یک سلول جدید برای جداکننده اضافه شده است.
    نتیجه:

  • جداکننده بین ستون ها نیز می تواند کمتر برجسته شود. برای این کار از سبک های حاشیه استفاده می کنیم.

    • مثال:یک جداکننده بین ستون های جدول با استفاده از خط نقطه چینمرزهای سلول های مجاور


    کارایی:
    بیایید ویژگی های حاشیه جدید را برای سلول ها اضافه کنیم:

    /* برای سلول سمت چپ */ td#left( عرض: 200 پیکسل؛ پس‌زمینه: #cccc؛ /* رنگ پس‌زمینه ستون چپ */ /* new */ border-right: 1px با علامت #000؛ /* گزینه‌های حاشیه چین‌دار سمت راست * / )

    با یکدیگر:

    </head> <بدن > <جدول id = "maket" cellpacing = "0" > <tr > <td id = "سمت چپ" > 1</td> <td id = "راست" > 2</td> </tr> </جدول>

    1

    نتیجه:

    طرح جدول با سه ستون

    مفهومی از چیدمان ثابت یا "سیال" وجود دارد.

    طرح بندی CSS ثابت

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

    مثال:یک قالب صفحه سه ستونی ایجاد کنید. از طرح بندی جدول ثابت استفاده کنید:

    • ستون سمت چپ - 150 پیکسل؛
    • ستون وسط - 400 پیکسل؛

    کارایی:

    </head> <بدن > <جدول id = "maket" cellpacing = "0" > <tr > <td id = "سمت چپ" > 1</td> <td id = "مرکزی" > 2</td> <td id = "راست" > 3</td> </tr> </جدول>

    1 2

    نتیجه:

    ماکت لاستیکی

    • عرض میزهنگام استفاده از طرح "لاستیک". به عنوان % عرض پنجره مرورگر تنظیم کنید. که هنگامی که پنجره مرورگر تغییر می کند، اندازه جدول نیز تغییر می کند.
    • عرض تمام سلول هاقابل نصب است در درصد.
    • گزینه دوم زمانی است عرض برخی از سلول هانصب شد در درصد، آ برخی - در پیکسل.

    مهم:مجموع عرض همه ستون ها بدون توجه به عرض جدول باید 100٪ باشد.


    مثال:

    • ستون سمت چپ - 20٪؛
    • ستون وسط - 40٪؛
    • ستون سمت راست - 40٪؛

    یک پس زمینه برای ستون ها تنظیم کنید و ستون ها را به صورت بصری با یک حاشیه جدا کنید.

    کارایی:

    </head> <بدن > <جدول id = "maket" cellpacing = "0" > <tr > <td id = "سمت چپ" > 1</td> <td id = "مرکزی" > 2</td> <td id = "راست" > 3</td> </tr> </جدول>

    1 2

    نتیجه:

    بیایید گزینه دوم را در نظر بگیریم، زمانی که عرض ستون مرکزی به طور خودکار توسط مرورگر انتخاب می شود. یک نمونه تصویر زیر است:

    مثال:یک قالب صفحه سه ستونی ایجاد کنید. از چیدمان میز سیال استفاده کنید:

    • ستون سمت چپ - 150 پیکسل؛
    • ستون وسط - 40٪؛
    • ستون سمت راست - 200 پیکسل؛

    یک پس زمینه برای ستون ها تنظیم کنید و ستون ها را به صورت بصری با یک حاشیه جدا کنید.


    کارایی:

    </head> <بدن > <جدول id = "maket" cellpacing = "0" > <tr > <td id = "سمت چپ" > 1</td> <td id = "مرکزی" > 2</td> <td id = "راست" > 3</td> </tr> </جدول>

    1 2

    نتیجه:
    نتیجه تقریباً یکسان خواهد بود ، فقط "کشش" به دلیل ستون مرکزی رخ می دهد.

    استفاده از میز تو در تو در چیدمان سیال

    اگر عرض دو ستون بر حسب درصد و ستون سوم به پیکسل تنظیم شده باشد، نمی‌توانید تنها با یک جدول از پس آن برآیید. بنابراین، اگر عرض کل جدول 100 درصد، ستون اول 200 پیکسل و ستون های باقی مانده 20 درصد باشد، یک محاسبه ساده نشان می دهد که اندازه ستون اول 60 درصد است. در این صورت، مقدار مشخص شده بر حسب پیکسل توسط مرورگر پذیرفته نمی شود و اندازه به صورت درصد تعیین می شود.

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

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

    • ستون سمت چپ - 150 پیکسل؛
    • ستون وسط - 60٪؛
    • ستون سمت راست - 40٪؛

    پس زمینه ستون ها را تنظیم کنید.

    کارایی:

    1
    2

    صفات cellpadding و cellpacing برچسب در اینجا ضروری هستند تا اطمینان حاصل شود که هیچ شکافی بین جداول وجود ندارد.
    نتیجه:

    سلام. جدول به عنوان یک عنصر ویژگی های خاص خود را دارد که آن را تا حد زیادی از بلوک هایی که برای بسیاری آشناتر هستند متمایز می کند. امروز می خواهم در مورد نحوه نوشتن فاصله بین سلول های جدول در CSS صحبت کنم.

    تفاوت با مدل بلوک

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

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

    دارای فاصله مرزی

    ویژگی‌ای که به کمک می‌آید، ویژگی‌ای است که در CSS به‌طور خاص برای داده‌های جدولی استفاده می‌شود – border-spacing. همانطور که از نام آن پیداست، فضای آزاد (حاشیه) هر سلول را مشخص می کند.

    نکته مهم: فاصله مرزی باید برای کل جدول تنظیم شود.یعنی به این صورت:

    جدول(
    فاصله مرزی: 0;
    }

    با این قانون فاصله بین سلول ها را از بین می بریم و اکنون آنها را محکم روی هم فشار می دهیم. بر این اساس، در صورت لزوم می توانید این فاصله را بر حسب پیکسل تنظیم کنید.

    ممکن است کمی غیرعادی باشد که یک ویژگی در انتخابگر جدول تنظیم شده باشد، اما این یکی از ویژگی های جدول است، فقط باید آن را به خاطر بسپارید. اگر جدول نیز روی border-collapse تنظیم شود، ویژگی کار نخواهد کرد: collapse . در این حالت، حاشیه‌های بیرونی سلول‌ها به‌طور خودکار حذف می‌شوند و نیازی به فاصله‌گذاری مرزی نیست.

    روش منسوخ شده برای تنظیم حاشیه سلول

    قبلا برای این به برچسب

    آنها صفت cellpacing را اضافه کردند که تورفتگی را تعیین می کرد، اما امروزه استفاده از این روش توصیه نمی شود. این کد را به هم می زند و استانداردهای توسعه وب مدرن را برآورده نمی کند.

    نکته این است که تورفتگی اشاره به ظاهرعنصر و html برای این منظور کاملاً نامناسب است. استانداردها قطعاً بیان می کنند که CSS عمدتاً باید مسئول این امر باشد.

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

    CSS به شما امکان می دهد نه تنها سبک حاشیه جدول، بلکه سبک مرزهای سلول های جداگانه را نیز تنظیم کنید. از آنجایی که هر سلول دارای مرزهای خاص خود است، مرز بین سلول های مجاور دو برابر است. اما می‌توان مرزهای سلول‌های همسایه را در یکی ترکیب کرد. برای این کار یک ویژگی فروپاشی مرزی وجود دارد. این مقادیر را می گیرد:

    border-collapse: جداگانه - هر سلول مرز مخصوص به خود را دارد (پیش‌فرض)

    border-collapse: فرو ریختن - مرز مشترک

    border-collapse: inherit - مقدار از عنصر والد گرفته شده است

    به عنوان مثال، بیایید یک جدول بسازیم و یک قاب برای سلول های تمام جداولی که در صفحه قرار می گیرند تنظیم کنیم. بیایید ابتدا چیزی را تغییر ندهیم تا ببینیم جدول چگونه به نظر می رسد:

    سبک:

    1
    2
    3
    4
    5
    6

    		 صفحه









    12
    34




    نتیجه این مثالهیچ کدام در شکل نشان داده نشده است. 1.

    برنج. 1. اعمال پارامتر فاصله مرزی

    توجه داشته باشید

    اگر تگ کنید

    پارامتر cellpacing اضافه می شود، سپس هنگام استفاده از ویژگی style-spacing در نظر گرفته نمی شود و مقدار سلول فاصله نادیده گرفته می شود. یک استثنا از این قاعده است مرورگر اینترنتاکسپلورر که اصلاً ویژگی فاصله بین مرزها را درک نمی کند.

    جداول

  • border-collapse نحوه نمایش حاشیه ها در اطراف سلول های جدول را تنظیم می کند. این پارامتر زمانی که یک قاب برای سلول ها نصب می شود نقش دارد، سپس در محل اتصال سلول ها یک خط با ضخامت دو برابر دریافت خواهید کرد. افزودن یک مقدار فروپاشی مرورگر را مجبور به تجزیه می کند مکان های مشابهدر جدول قرار دهید و خطوط دوتایی را در آن حذف کنید.
  • table-layout مشخص می کند که مرورگر چگونه باید ارتفاع و عرض سلول های جدول را بر اساس محتویات آن محاسبه کند.
  • border-spacing فاصله بین مرزهای سلول ها را در جدول مشخص می کند. هنگامی که جدول دارای پارامتر border-collapse برای جمع کردن باشد، مشخصه border-spacing کار نمی کند.