اگر عرض جدول را به عنوان یک ویژگی تنظیم کنید. رفتار سلول های خالی

یک رشته و تگ ایجاد می کند :

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

عنوان جدول

سلول 1 از ردیف 1	سلول 2 از ردیف 1
سلول 1 از ردیف 2	سلول 2 از ردیف 2

تراز جدول. تراز کردن محتویات سلول

از ویژگی align تگ برای تراز کردن جدول استفاده می شود.

.

با استفاده از ویژگی align، می توانید جدول را در سمت چپ یا راست (align= "left" و align= "right") بخشی از پنجره مرورگر قرار دهید ( عنصر والد) یا در مرکز آن (align="center" ).

تراز کردن محتویات خطوط ( برچسب زدن

) و سلول ها ( برچسب زدن ، ایجاد یک ردیف جدول دارای ویژگی های ارتفاع و عرض نیست. ارتفاع یک ردیف با ارتفاع سلول های واقع در آن مطابقت دارد. و عرض ردیف برابر با عرض جدول است.

مقادیر ارتفاع و عرض بر حسب پیکسل یا درصد نسبت به مشخص شده است فضای خالی. برای تنظیم مقادیر:

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

یک عدد صحیح مثبت و به دنبال آن یک نماد % مشخص کنید.

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

) به صورت افقی و تعیین محل آن - بالا یا زیر جدول.

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

ارتفاع و عرض جدول و سلول ها

اندازه های پیش فرض ( ارتفاع و عرض) هر دو جدول و سلول بسته به اندازه محتوای آنها تغییر می کنند.

اما ارتفاع و عرض هر دو جدول و سلول های جداگانه آن را می توان به طور واضح تنظیم کرد - به ترتیب با استفاده از ویژگی های ارتفاع و عرض.

برچسب بزنید

) به صورت افقی نیز با استفاده از ویژگی align و به صورت عمودی با استفاده از ویژگی valign انجام می شود: مشخصه align مقادیر چپ، راست، مرکز و justify را می‌پذیرد که به ترتیب تراز محتویات ردیف‌ها و سلول‌ها را در سمت چپ، راست، مرکز و عرض آنها مشخص می‌کند. مشخصه valign که مقادیر top، bottom و middle را می گیرد، تراز محتویات سطرها و سلول ها را به ترتیب در امتداد لبه های بالا، پایین و میانی آنها مشخص می کند. ویژگی align همچنین برای تراز کردن هدر ( برچسب زدن

>

همانطور که از مثال مشاهده می شود: با تعیین عرض یکی از سلول های یک ستون، به این ترتیب عرض کل ستون را تعیین می کنید. و با تعیین ارتفاع یکی از سلول های پشت سر هم ارتفاع کل سطر را مشخص می کنید.

حاشیه های جدول و سلول

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

ویژگی تگ مرزی

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

ضخامت حاشیه - ضخامت لبه ( یا قاب ها) به پیکسل مشخص می شود. مقدار مشخصه مرزی یک عدد صحیح مثبت است. اگر مشخصه border بدون مقدار مشخص شود، ضخامت حاشیه 1 پیکسل خواهد بود.

ضخامت حاشیه فقط برای جدول تنظیم شده است. ضخامت حاشیه اطراف سلول ها همیشه 1 پیکسل است ( یا گم شده).

به طور پیش فرض، حاشیه با افکت سه بعدی ظاهر می شود و سیاه است.

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

)، رشته های ( برچسب زدن ) یا سلول ها ( برچسب زدن - خط جدول html
- ستون (سلول) جدول html.

حالا بیایید سعی کنیم همه تگ ها را در یک جدول ترکیب کنیم. برای انجام این کار، یک جدول html ایجاد می کنیم که از دو سطر و سه ستون تشکیل شده است:

ساخت این جدول html بسیار آسان است. ابتدا تگ های خود جدول را قرار می دهیم که داخل آن تعداد ردیف های مورد نیاز (در مثال ما 2 ردیف) قرار می گیرد:

). ویژگی bordercolor توسط همه مرورگرها پشتیبانی نمی شود و بنابراین توصیه نمی شود. برای تنظیم رنگ حاشیه بهتر است از استایل ها استفاده کنید ( در حال حاضر در CSS است). مشخصه مرزی مشخص نشده است. بنابراین هیچ مرزی وجود ندارد. ضخامت حاشیه جدول 3 پیکسل است. سلول ها 1 حاشیه پیکسل دارند! نمایش حاشیه جزئی حاشیه جدول و حاشیه اطراف سلول ها ممکن است تا حدی نمایش داده شود. ویژگی تگ فریم محل رسم حاشیه جدول را مشخص می کند. ویژگی قوانین نحوه نمایش مرزهای سلول را مشخص می کند. قاب "500px"="hsides" rules="cols" > نصب شده است افقی حاشیه های جدول و حاشیه ها نمایش داده می شود بین ستون ها بالشتک داخل و خارج سلول هنگام قالب بندی جداول در HTML، برای نمایش بصری برخی از اطلاعات و درک راحت آن، ممکن است لازم باشد استفاده مفیدبالشتک داخل و خارج سلول ها padding داخلی - از مرزهای سلول ها تا محتوای آنها، توسط ویژگی cellpadding تگ تنظیم می شود. . بالشتک های خارجی - فاصله بین مرزهای سلول های مجاور و فاصله از مرزهای سلول تا مرز جدول، توسط ویژگی cellpacing تگ تنظیم می شود. . اعداد صحیح به عنوان مقادیر مشخصه مشخص می شوند اعداد مثبت، که فاصله را بر حسب پیکسل مشخص می کند. فاصله از محتویات سلول تا مرز آنها 10 پیکسل است فاصله بین سلول ها و سلول ها تا حاشیه جدول 25 پیکسل است ادغام سلول ها هنگام طراحی و قالب بندی جداول در HTML، اغلب نیاز به ادغام سلول های مجاور دارید. و اگر چنین نیازی پیش آمد، باید از ویژگی های colspan و rowspan تگ استفاده کنید.	. ویژگی colspan تعداد سلول هایی را که به صورت افقی ادغام می شوند و ویژگی rowspan تعداد سلول هایی را که به صورت عمودی ادغام می شوند را مشخص می کند. اگر جدول از چند ردیف تشکیل شده باشد، هر دو ویژگی معنا دارند. 1 2 3 4 1 2 3 4 پس زمینه میز. پس زمینه سلول جدول در HTML امکان تنظیم یک پس زمینه کلی برای کل جدول و یک پس زمینه برای یک سلول انتخاب شده وجود دارد. ویژگی تگ پس زمینه تصویری را که تصویر پس زمینه جدول خواهد بود را مشخص می کند. مقدار مشخصه آدرس فایل تصویر را مشخص می کند - مسیر مطلق یا نسبی به فایل (). ویژگی تگ bgcolor رنگ پس زمینه جدول را تعیین می کند. رنگ را می توان به دو صورت تنظیم کرد () با استفاده از همان ویژگی ها، می توانید تصویر پس زمینه و رنگ پس زمینه را برای هر سلول جدول تنظیم کنید ( برچسب زدن , و . هر یک از آنها را می توان برای تغییر برخی از ویژگی های یک یا چند ردیف از جدول استفاده کرد: این دوباره محتویات سلول ها در ردیف ها را به صورت افقی و عمودی تراز می کند - با استفاده از صفات را تراز کنیدو valign به ترتیب; و با استفاده از ویژگی bgcolor رنگ پس زمینه سلول ها را تنظیم کنید. هنگام استفاده از این برچسب ها، باید از چندین تفاوت ظریف که تفاوت بین آنها را تعیین می کند آگاه باشید. برچسب ها و باید قبل از برچسب قرار گیرد ، بلافاصله پس از تگ باز کردن جدول ). صورتی تیره رنگ پس زمینه میز است. تصویر پس زمینه یک سلول منفرد آسمان است! اجازه دهید وجود ویژگی cols تگ را نیز به یاد بیاوریم ، که تعداد ستون های جدول را به مرورگر می گوید. استفاده از ویژگی cols به مرورگر اجازه می دهد تا محتویات جدول را با سرعت بیشتری نمایش دهد. در حال ویرایش یک جدول در این بخش، تگ هایی را که هنگام ویرایش چندین عنصر جدول به طور همزمان استفاده می شوند، بررسی می کنیم. این برچسب ها را می توان به دو گروه تقسیم کرد. گروه اول شامل برچسب ها می شود و . آنها تقریباً یکسان هستند و برای تنظیم برخی از ویژگی ها و تغییر ویژگی های یک یا چند ستون جدول خدمت می کنند. یکی از این تگ ها بلافاصله بعد از تگ قرار می گیرد . بیایید بگوییم این یک برچسب است . استفاده از ویژگی span یک تگ تعداد ستون هایی را که صفات align، valign یا width به آنها اعمال می شود را نشان دهید ( تراز کردن محتویات سلول های ستون به صورت افقی، عمودی یا تنظیم عرض ستون). اگر ویژگی span در تگ باشد وجود ندارد، سپس ویژگی های یک - ستون اول جدول - تغییر می کند. بار دوم که از تگ استفاده می کنید خواص برای موارد زیر تنظیم شده است ( بعدی - اگر ویژگی span وجود نداشته باشد) ستون های جدول و غیره "2" عرض ="70px" > 1 2 3 4 5 1 2 3 4 5 دسته دوم تگ ها نیز شامل تگ هایی هستند که تقریباً با یکدیگر یکسان هستند . رشته هایی که در تگ قرار می گیرند در بالای جدول ارائه می شوند و سطرها در تگ محصور می شوند در انتهای جدول قرار خواهد گرفت. هر دو تگ را فقط می توان یک بار در یک جدول اعمال کرد. برچسب بزنید می تواند چندین بار در یک برچسب استفاده شود . "راست" bgcolor="#00FF33" > 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 1. جداول HTML چیست و چرا به آنها نیاز است؟ جداول html- این یکی از اساسی ترین اجزای هر صفحه html و بر این اساس، هر سایت است. به عنوان مثال، کل سایت از جداول تشکیل شده است: تصاویر، متون، پیوندها، فرم های ثبت نام - همه چیز با استفاده از جداول html نسبت به یکدیگر قرار می گیرد (در واقع، کل سایت نیز در یک جدول بزرگ قرار دارد). 2. جداول html چه تگ هایی دارند؟ برچسب ها، تعریف جدول html به این صورت نوشته می شود: اما از آنجایی که می دانیم همه جداول از ردیف ها و ستون ها (سلول ها) تشکیل شده اند، بنابراین باید برای آنها نیز تگ ها را تنظیم کنیم:

سپس هر ردیف را با استفاده از تگ های ستونی به سلول ها تقسیم می کنیم:

- سلول 1.1
- سلول 1.2
- سلول 1.3


- سلول 2.1
- سلول 2.2
- سلول 2.3

در واقع اولین رقم در کتیبه ها شماره ردیف و دومی شماره سلول (1x2 - ردیف اول، سلول دوم و غیره) است.

3. چگونه رنگ پس زمینه جداول html را تنظیم کنیم؟

حالا بیایید بفهمیم که چگونه پس‌زمینه جدول یا هر سلول را جداگانه تنظیم کنیم.

بنابراین، برای تنظیم پس زمینه از ویژگی استفاده می شود bgcolor="background_color".

به عنوان مثال، اگر ما نیاز به یک رنگ برای کل علامت داشته باشیم، این کار را به صورت زیر انجام می دهیم:

bgcolor="background_color">

- سلول 1.1
- سلول 1.2
- سلول 1.3


- سلول 2.1
- سلول 2.2
- سلول 2.3

به عنوان مثال، اگر شما نیاز به ایجاد یک علامت دارید رنگ زرد، سپس می نویسیم:

در صورت نیاز رنگ پس زمینه را برای ردیف تنظیم کنیدجدول html و سپس ویژگی bgcolor="background_color"برای برچسب اعمال شود

ما باید عرض جدول را تنظیم کنیم، اما گاهی اوقات باید عرض جدول را تغییر دهیم. و ما باید آن را کشف کنیم. چگونه می توانم عرض جدول را تغییر دهم؟ عرض جدول را می توان بر حسب پیکسل یا درصد تغییر داد... اکنون شروع به تغییر عرض جدول در html می کنیم! آخرین بار ما یک جدول با عرض 500 پیکسل، با سه ستون و سه ردیف (در مورد ویژگی border = "1 - که مسئول حاشیه است) درست کردیم! در اینجا کد این جدول آمده است. اکنون برای اینکه بفهمیم چگونه عرض یک جدول یا ستون را تغییر دهیم، اجازه دهید تعدادی اعداد را به کد خود تغییر داده و اضافه کنیم. جدول عرض = "500" - به 599 تغییر دهید. این صفحه بر روی جداول ساخته شده است، و عرض فیلد متن، i.e. جایی که این کلمات قرار دارند 600 پیکسل است. به دست خواهیم آورد: عرض ستون شماره 2 را 200 پیکسل می کنیم: عرض ستون شماره 3 را 299 پیکسل می کنیم: و ما این کد را دریافت می کنیم: بیایید به جدول خود نگاه کنیم حالا بیایید مقدار صفت عرض را به نصف = 50% تغییر دهیم. ما به جدول خود نگاه می کنیم که 50 درصد است. این تمام چیزی است که می خواستم در مورد نحوه تغییر عرض جدول به شما بگویم. حالا بریم سراغ ارتفاع میز! به مرورگر اطلاع می دهد که جدول تکمیل شده است. هر جدولی از ستون و ردیف تشکیل شده است. برچسب بزنید
سلول در یک ردیف بر این اساس، هر تعداد سلول در یک ردیف گنجانده شود، به همان تعداد ستون در جدول وجود خواهد داشت. برچسب بزنید	همچنین یک سلول ایجاد می کند. تفاوت آن با برچسب	این است که سلول ایجاد شده توسط تگ است	یک سلول هدر است: محتویات آن در مرکز قرار دارد و اگر متنی باشد، مرورگر آن را به صورت پررنگ نمایش می دهد. محتویات سلول ایجاد شده توسط تگ	به طور پیش فرض در سمت چپ آن قرار دارد. برچسب بزنید

bgcolor="#FFFF00"> bgcolor="#0000FF"> 1.1 1.2 1.3 2.1 2.2 2.3

1.1	1.2	1.3
2.1	2.2	2.3

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

دقیقا به همین ترتیب مشخص شده است رنگ هر سلول به طور جداگانه. به عنوان مثال، اگر می خواهید رنگ سلول 1.2 را به آبی تغییر دهید، سپس داخل تگ باز است صفت bgcolor="background_color":

4. چگونه می توان اندازه عرض و ارتفاع سلول های جدول html را تنظیم کرد؟

بنابراین، برای تنظیم دستی عرض و ارتفاع سلول ها، از ویژگی های height و width استفاده کنید. آنها را می توان برای کل جدول، برای یک ردیف یا برای یک سلول (ستون) تنظیم کرد. ارتفاع و عرض را می توان به صورت پیکسل یا درصد مشخص کرد. در مورد ما، عرض و ارتفاع را بر حسب پیکسل برای ستون ها (سلول ها) تنظیم می کنیم.

ارتفاع- ویژگی که ارتفاع سلول را تعیین می کند

عرض- ویژگی که عرض سلول را مشخص می کند

و حالا برای مثال:

حالا توضیح می دهم که چرا در هر ردیف فقط یک بار ارتفاع سلول را تنظیم می کنیم.

اگر در یک ردیف ارتفاعی را برای هر سلولی بیشتر از سایر سلول ها تعیین کنید، با وجود این، تمام سلول ها (ستون های) ردیف شما از نظر ارتفاع با بزرگترین آنها برابر خواهند بود. و عرض هر ردیف بهتر است جداگانه تنظیم شود!

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

همچنین، اغلب شما باید ارتفاع و عرض عرض را تنظیم کنید در درصد:

محتویات سلول

اگر عرض یک سلول را مانند مثال ما روی 40 درصد قرار دهیم، به این معنی است که هنوز 60 درصد برای سلول های باقی مانده باقی مانده است، یعنی. مجموع عرض آنها نباید از 60 درصد تجاوز کند. همه چیز بسیار ساده است: در کل ما فقط 100٪ داریم. ما می شماریم: 100 - 40 = 60.

5. چگونه متن را در یک جدول html تراز کنیم؟

حالا بیایید بفهمیم که چگونه متن جدول html خود را در سمت چپ، راست و مرکز تراز کنیم.

این با استفاده از ویژگی انجام می شود:

align=”چپ”- متن داخل جدول html را به سمت چپ تراز می کند

align=”center”- تراز می کند متن htmlجداول در مرکز

align=”راست”- متن داخل جدول html را به سمت راست تراز می کند

بر این اساس، ویژگی align می تواند مقادیر سمت راست و چپ را نیز بگیرد. معنی justify هنگامی که با یک برچسب استفاده می شود ویژگی align را نمی توان پذیرفت.

مثلا، کد htmlجدولی با متن تراز شده در مرکز به شکل زیر است:

تراز "مرکز"> align = "چپ"> 1x1 تراز "مرکز">1.2 تراز "راست"> 1x3 align = "چپ">2.1 تراز "مرکز"> 2x2 تراز "راست">2.3

با ثبت صفت تراز "مرکز"در افتتاحیه

، جدول html را در مرکز صفحه مرورگر تراز کردیم.

این نتیجه ای است که در مرورگر دریافت خواهید کرد:

1x1	1.2	1x3
2.1	2x2	2.3

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

تراز عمودی با ویژگی مشخص می شود:

valign = "بالا"- محتوا در بالای سلول قرار خواهد گرفت

valign = وسط- محتوا در مرکز سلول قرار خواهد گرفت

valign = "پایین"- محتوا در پایین سلول قرار خواهد گرفت

بیایید با استفاده از مثال خود به این ویژگی ها نگاه کنیم:

valign = "بالا"> 1x1 1.2 valign = "بالا"> 1x3 valign = "پایین">2.1 2x2 valign = "پایین">2.3

اگر به نتیجه ویژگی ها در مرورگر نگاه کنیم، این چیزی است که به دست می آوریم: تراز کردنو valign:

1x1	1.2	1x3
2.1	2x2	2.3

6. چگونه سلول ها و ستون های جدول html را ترکیب کنیم؟

در این قسمت از مقاله ما در مورد ویژگی ها صحبت خواهیم کرد کلسپنو طول ردیف.

کلسپن- تعداد ستون هایی را که یک سلول معین پوشش می دهد را تعیین می کند

طول ردیف- تعداد ردیف هایی را که این سلول به آنها گسترش می یابد را تعیین می کند

ارزش های کلسپنو طول ردیفمی تواند مقداری از 2 یا بیشتر بگیرد، یعنی. یک سلول می تواند در دو یا چند ستون (ردیف) کشیده شود.

بنابراین، اکنون، با استفاده از مثال، یک سلول 1x1 را به دو ستون (سلول) تبدیل می کنیم. برای انجام این کار، از ویژگی colspan="2" استفاده می کنیم و آن را به یک سلول 1x1 اختصاص می دهیم. کد به شکل زیر خواهد بود:

همانطور که می بینیم، سلول 1x1 در طول دو سلول گسترش می یابد. بر این اساس، طول آن برابر است با طول مجموع این دو سلول (160 پیکسل). برای سلول 1x1 مشخصه عرض مشخص نکردیم، اما اگر تصمیم به این کار داشتیم، عرض را روی 160 پیکسل قرار می دادیم. و همچنین، لطفا توجه داشته باشید که در مثال ما سلول 1x3 وجود ندارد، i.e. تنها دو سلول در ردیف اول وجود دارد، چرا - ما قبلاً در مورد آن صحبت کردیم - یک سلول 1x1 برابر با دو سلول است، به لطف ویژگی colspan.

ویژگی های colspan و rowspan باید با دقت بسیار مورد استفاده قرار گیرند. یک خطا ممکن است باعث از کار افتادن سایت شما شود.

و حالا که پارامتر colspan را فهمیدیم، بیایید به پارامتر rowspan نگاه کنیم. اصل عملیات یکسان است:

colspan = "2"> 1.1 1.2 2.1 2.2

1.1		1.2
2.1	2.2

بنابراین، ما یاد گرفتیم که چگونه سلول ها را در ردیف ها و ستون های جداول html ترکیب کنیم.

7. چگونه می توان تورفتگی ها را حذف، اضافه یا تغییر داد و چگونه یک فریم برای جدول html تنظیم کرد؟

بنابراین، قبلاً یک جدول html ایجاد کردیم، تورفتگی بین سلول ها به وضوح قابل مشاهده است. برای اینکه آنها حتی بهتر دیده شوند، بیایید یک قاب برای میز خود اضافه کنیم. این کار با استفاده از ویژگی ها انجام می شود:

border =عرض حاشیه بر حسب پیکسل- عرض قاب را تنظیم می کند

bordercolor = رنگ مرزی- رنگ قاب را تنظیم می کند

برای مثال، بیایید به جدول html خود یک قاب سیاه به عرض 1 پیکسل بدهیم.

برای این تگ

افزودن ویژگی ها:

اکنون می‌توانیم تورفتگی‌های بین سلول‌های جدول html و فرورفتگی‌های لبه‌های داخلی سلول‌ها به متن را به وضوح ببینیم. بنابراین می توانیم این تورفتگی ها را بدون مشکل مدیریت کنیم. صفات برای این منظور هستند:

cellpacing =عرض فضا بر حسب پیکسل- فضای بین سلول ها

cellpadding="عرض بالشتک به پیکسل"- تورفتگی در داخل سلول (از لبه سلول تا متن، تصویر، پیوند...)

به عنوان مثال، بیایید تورفتگی بین سلول ها را 10 پیکسل، و تورفتگی از لبه سلول به متن را به 20 پیکسل افزایش دهیم. این کار به این صورت انجام می شود:

cellpadding = "20"cellpacing = "10"> 1.1 1.2 2.1 2.2

اگر به نتیجه در مرورگر نگاه کنیم، به وضوح می بینیم که فاصله بین سلول ها ( فاصله سلولی) جدول html ما به 10 پیکسل افزایش یافته است و فاصله بین متن و لبه داخلیسلول ها 20 پیکسل افزایش یافت.

1.1		1.2
2.1	2.2

اگر نیاز دارید که تورفتگی ها را به طور کلی حذف کنید، به سادگی آن را حذف کنید cellpadding = "0"و cellpacing = "0".

8. چگونه یک جدول html را در جدول دیگر وارد کنیم؟

به مرحله پایانی مطالعه جداول html نزدیک می شویم. اکنون یاد می گیریم که چگونه یک جدول را در جدول دیگر قرار دهیم.

با استفاده از مثال، در داخل سلول 1.2 یک جدول جدید شامل یک سطر و دو ستون وارد می کنیم. در جدول داخلی html یک حاشیه قرمز با عرض 2 پیکسل و فاصله بین سلول ها 0 پیکسل تعیین می کنیم. جدول داخلی را نیز در بالای سلول قرار می دهیم.

این کار بسیار ساده انجام می شود:

1.1 3.1 3.2 2.1 2.2

این همان چیزی است که در نتیجه تحولات جدید جدول ما اتفاق افتاد (سلول های قرمز یک جدول داخلی هستند که در داخل یک جدول بزرگ قرار دارد):

1.1		3.1 3.2
2.1	2.2

در این مرحله به پایان این مقاله می پردازیم. من فکر می کنم موفق بود و درک آن دشوار نبود و امیدوارم دیگر با جداول مشکلی نداشته باشید.

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

عرض سلول های جدول با عرض محتوای آنها تعیین می شود، بنابراین عرض ستون های جدول می تواند متفاوت باشد. ارتفاع تمام سلول ها در یک ردیف یکسان است و با ارتفاع بالاترین سلول تعیین می شود.

قالب بندی جداول

1. حاشیه میز

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

جدول ( حاشیه-کوچک کردن: جمع کردن؛ /*حذف فضاهای خالی بین سلول ها*/ حاشیه: 1px خاکستری یکدست؛ /*تنظیم جدول مرز بیرونی خاکستریضخامت 1px*/ )

مرزهای سلول سرصفحههر ستون برای عنصر ام مشخص شده است:

Th (حاشیه: 1px خاکستری یکدست؛)

مرزهای سلولیبدنه جدول برای عنصر td مشخص شده است:

Td (حاشیه: 1px خاکستری جامد؛)

ضخامت مرزهای سلول های مجاور دو برابر نمی شود، بنابراین می توانید برای کل جدول به روش زیر مرزها را تعیین کنید:

Th, td (حاشیه: 1px خاکستری یکدست؛)

می توانید حاشیه بیرونی جدول را با افزایش عرض آن برجسته کنید:

جدول (حاشیه: 3px خاکستری یکدست؛)

مرزها را می توان تا حدی تنظیم کرد:

/* یک حاشیه بیرونی خاکستری با ضخامت 3 پیکسل برای جدول تنظیم کنید */ جدول (حاشیه بالای: 3 پیکسل خاکستری یکدست؛ ) /* یک حاشیه خاکستری با ضخامت 1 پیکسل برای سلول بدنه جدول تنظیم کنید */ td (حاشیه-پایین: 1 پیکسل جامد خاکستری ؛)

می توانید در مورد ملک مرزی بیشتر بخوانید.

2. نحوه تنظیم عرض و ارتفاع جدول

پیش فرض عرض و ارتفاع میزتوسط محتویات سلول های آن تعیین می شود. اگر عرض مشخص نشده باشد، برابر با عرض پهن ترین ردیف (ردیف) خواهد بود.

عرض جدول و ستونبا استفاده از ویژگی width تنظیم می شود. اگر جدول (عرض: 100٪؛) برای یک جدول مشخص شده باشد، عرض جدول برابر با عرض بلوک ظرفی است که در آن قرار دارد.

عرض جدول و ستون‌ها معمولاً بر حسب px یا % مشخص می‌شود، برای مثال:

جدول (عرض: 600 پیکسل؛) هفتم (عرض: 20 درصد؛) td:فرزند اول (عرض: 30 درصد؛)

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

Th, td (بالشتک: 10px 15px؛)

3. نحوه تنظیم پس زمینه جدول

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

4. ستون های جدول

مدل جدول CSS عمدتاً بر روی ردیف‌هایی متمرکز است که با استفاده از تگ تشکیل شده‌اند

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

با استفاده از برچسب

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

با استفاده از جدول انتخابگر td:first-child , table td:last-child می توانید استایل هایی را برای اولین یا آخرین ستون جدول تنظیم کنید (به جز سلول اول سرصفحه جدول).

با استفاده از انتخابگر جدول td:nth-child (قاعده انتخاب ستون)، می‌توانید استایل‌ها را برای هر ستون جدول تنظیم کنید.

می توانید اطلاعات بیشتری در مورد انتخابگرهای CSS بخوانید.

5. نحوه اضافه کردن عنوان جدول

با استفاده از تگ می توانید عنوانی را به جدول اضافه کنید ، و با استفاده از ویژگی caption-side می توان آن را در جلو یا زیر جدول قرار داد. برای تراز افقی متن عنوان، از ویژگی text-align استفاده کنید. به ارث برده.

...

جدول شماره 1

شرکت	Q1	Q2	Q3	Q4

عنوان (سمت زیرنویس: پایین، تراز نوشتاری: راست، بالشتک: 10 پیکسل 0، اندازه قلم: 14 پیکسل؛ ) برنج. 2. نمونه ای از نمایش هدر زیر جدول

6. نحوه حذف فضای بین قاب های سلول

به طور پیش فرض، فریم های سلول جدول با یک فضای کوچک از هم جدا می شوند. اگر border-collapse: collapse را برای جدول تنظیم کنید، شکاف حذف خواهد شد. ملک موروثی است.

نحو

جدول (مرز - فرو ریختن: فرو ریختن؛)
برنج. 3. نمونه جداول با قاب های سلولی ادغام شده و مجزا

7. نحوه افزایش فاصله بین فریم های سلولی

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

نحو

جدول (حاشیه-جمع کردن: مجزا؛ فاصله مرزی: 10px 20px؛) جدول (حاشیه-جمع کردن: جدا؛ فاصله مرز: 10px؛)
برنج. 4. نمونه جداول با افزایش فاصله بین قاب های سلول

8. چگونه سلول های خالی جدول را پنهان کنیم

ویژگی vala-cells سلول های خالی را پنهان یا نشان می دهد. فقط سلول‌هایی را تحت تأثیر قرار می‌دهد که محتوایی ندارند. اگر یک سلول روی یک پس‌زمینه و یک جدول روی جدول تنظیم شود (حاشیه جمع‌کردن: collapse؛)، آن‌گاه سلول پنهان نمی‌شود. به ارث برده.

شرکت	Q1	Q2	Q3
مایکروسافت	20.3	30.5
گوگل	50.2	40.63	45.23

جدول (حاشیه: 1px جامد #69c؛ حاشیه-جمع کردن: جدا؛ سلول های خالی: پنهان کردن؛ ) th, td (حاشیه: 2px جامد #69c؛) برنج. 5. مثالی از مخفی کردن یک سلول جدول خالی

9. با استفاده از ویژگی table-layout یک جدول را چیدمان کنید

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

نحو

جدول (طرح جدول: ثابت؛)

10. بهترین چیدمان میز

1. مینیمالیسم افقی

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

کارمند	حقوق	جایزه	سرپرست
استفن سی کاکس	$300	$50	باب
ژوزفین تان	$150	-	آنی
جویس مینگ	$200	$35	اندی
جیمز ای پنتل	$175	$25	آنی

جدول ( فونت-خانواده: "Lucida Sans Unicode"، "Lucida Grande"، Sans-Serif؛ اندازه قلم: 14 پیکسل؛ پس زمینه: سفید؛ حداکثر عرض: 70٪؛ عرض: 70٪؛ حاشیه-کوچک کردن: جمع کردن؛ متن -align: چپ؛ th (وزن قلم: معمولی؛ رنگ: #039؛ حاشیه پایین: 2px توپر #6678b1؛ بالشتک: 10px 8px؛ ) td (رنگ: #669؛ بالشتک: 9px 8px؛ انتقال: 0.3s خطی ) tr:hover td (رنگ: #6699ff;)

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

Td ( حاشیه پایین: 1px جامد #cccc؛ رنگ: #669؛ بالشتک: 9px 8px؛ انتقال: 0.3s خطی؛ )/*بقیه کد مانند مثال بالا است*/

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

Th ( وزن قلم: معمولی؛ رنگ: #039؛ بالشتک: 10px 15px؛ ) td (رنگ: #669؛ حاشیه بالا: 1px جامد #e8edff؛ padding: 10px 15px; ) tr:hover td (پس‌زمینه: #e8edff ;)

2. مینیمالیسم عمودی

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

Th (وزن قلم: معمولی؛ حاشیه پایین: 2px توپر #6678b1؛ حاشیه-راست: 30px جامد #fff؛ حاشیه-چپ: 30px جامد #fff؛ رنگ: #039؛ بالشتک: 8px 2px؛ ) td (حاشیه- سمت راست: 30px جامد #fff-left: 30px جامد #fff رنگ: 12px 2px;

3. سبک جعبه ای

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

Th (اندازه قلم: 13 پیکسل؛ وزن قلم: معمولی؛ پس‌زمینه: #b9c9fe؛ حاشیه بالا: 4 پیکسل جامد #aabcfe؛ حاشیه پایین: 1 پیکسل توپر #fff؛ رنگ: #039؛ لایه‌بندی: 8 پیکسل؛ ) td (پس‌زمینه : #e8edff: 1px solid #fff

سخت ترین چیز این است که طرح رنگی را پیدا کنید که به طور هماهنگ با وب سایت شما ترکیب شود. اگر سایت از نظر گرافیک و طراحی سنگین است، پس استفاده از این سبک برای شما بسیار سخت خواهد بود.

جدول ( فونت-خانواده: "Lucida Sans Unicode"، "Lucida Grande"، Sans-Serif؛ اندازه قلم: 14 پیکسل؛ حداکثر عرض: 70٪؛ عرض: 70٪؛ تراز نوشتاری: مرکز؛ کوچک کردن حاشیه: جمع کردن حاشیه بالا: 7px جامد #9baff1; رنگ جامد #9baff1; #039; بالشتک: 8px;

4. گورخر افقی

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

Th ( وزن قلم: معمولی؛ رنگ: #039؛ بالشتک: 10px 15px؛ ) td (رنگ: #669؛ حاشیه بالا: 1px جامد #e8edff؛ بالشتک: 10px 15px؛ ) tr:nth-child(2n) ( پس زمینه: #e8edff;)

5. سبک روزنامه

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

جدول (حاشیه: 1px توپر #69c;) th (وزن قلم: معمولی؛ رنگ: #039؛ حاشیه پایین: 1px خط چین #69c؛ بالشتک: 12px 17px؛ ) td (رنگ: #669; بالشتک: 7px 17px; ) tr:hover td (پس‌زمینه: #ccddff;)

جدول (حاشیه: 1px توپر #69c؛) th (وزن قلم: معمولی؛ رنگ: #039؛ بالشتک: 10px؛ ) td (رنگ: #669؛ حاشیه بالا: 1px خط چین #fff؛ بالشتک: 10px؛ پس‌زمینه: #ccddff ) tr:hover td (پس زمینه: #99bcff;)

جدول (حاشیه: 1px توپر #6cf;) th (وزن قلم: معمولی؛ اندازه قلم: 13px؛ رنگ: #039؛ تبدیل متن: بزرگ؛ حاشیه سمت راست: 1px جامد #0865c2؛ حاشیه بالا: 1px جامد #0865c2: 1px solid #0865c2;

6. پس زمینه میز

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

Png") 98% 86% بدون تکرار؛ ) th (وزن قلم: معمولی؛ اندازه قلم: 14 پیکسل؛ رنگ: #339؛ پد: 10 پیکسل 12 پیکسل؛ پس‌زمینه: سفید؛ ) td (رنگ: #669؛ حاشیه- بالا: 1px پس‌زمینه جامد: rgba(51, 51, 153, .2)؛ پس‌زمینه: rgba

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

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

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

برای تعیین عرض جدول باید از یک ویژگی CSS استفاده کنید عرض، و برای تنظیم ارتفاع باید از ویژگی استفاده کنید ارتفاع.

در یک مثال به این شکل است.

جدول (عرض: 500 پیکسل؛ ارتفاع: 100 پیکسل؛ )

نتیجه در مرورگر:

کد کامل:

جدول با اندازه های داده شده

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

مقادیر عرض و ارتفاع جدول را می توان به صورت مشخص کرد قدر مطلق(بر حسب پیکسل) و نسبی – بر حسب درصد. به عنوان مثال، به ترتیب 20 پیکسل و 20 درصد.

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

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

عرض: خودکار؛

ارتفاع: خودکار؛

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

تعیین اندازه سلول ها و ستون های جداگانه

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

تغییر اندازه سلول ها با استفاده از ویژگی های CSS مشابه اندازه جدول انجام می شود، یعنی: عرضو ارتفاع.

برای افزودن سبک به سلول ها، می توانید از یکی از دو گزینه استفاده کنید:

1. به سلول ها نام کلاس های جداگانه بدهید. به این شکل خواهد بود: class="cell-50px"

   و بعد از آن باید برای این کلاس ها استایل ها را اعمال کنید.

2. فعال کردن ویژگی سبک، داخل آن کد CSS لازم را بنویسید.

در عمل گزینه دوم به صورت زیر خواهد بود:

...

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

جدول با اندازه های داده شده

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

نتیجه در مرورگر:

نحوه تغییر اندازه فونت در جدول

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

Th (اندازه قلم: 30 پیکسل؛ )

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

 

---

خواندن:
چرا خواب طوفان روی امواج دریا را می بینید؟ حسابداری تسویه حساب با بودجه کیک پنیر از پنیر در یک ماهیتابه - دستور العمل های کلاسیک برای کیک پنیر کرکی کیک پنیر از 500 گرم پنیر دلمه سالاد مروارید سیاه با آلو سالاد مروارید سیاه با آلو دستور العمل لچو با رب گوجه فرنگی