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

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

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

سربرگ جدول

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

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

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

.

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

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

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

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

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

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

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

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

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

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

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

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

برچسب بزنید

) به صورت افقی نیز با ویژگی align و به صورت عمودی با ویژگی valign انجام می شود: صفت align مقادیر left، right، center و 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 برچسب تنظیم شده است . لایه بیرونی - فاصله بین مرزهای سلول های همسایه و فاصله از مرز سلول ها تا مرز جدول، توسط صفت فاصله سلولی تگ تنظیم می شود. . مقادیر مشخصه اعداد صحیح مثبتی هستند که فاصله را بر حسب پیکسل مشخص می کنند. فاصله از محتوای سلول تا مرز آنها 10 پیکسل است فاصله بین سلول ها و سلول ها حاشیه جدول 25 پیکسل است ادغام سلول ها هنگام طراحی و قالب بندی جداول در HTML، اغلب لازم است سلول های مجاور را ادغام کنید. و اگر چنین نیازی پیش آمد، باید از ویژگی های colspan و rowspan تگ استفاده کنید.	. ویژگی colspan تعداد سلول هایی را که باید به صورت افقی ادغام شوند و ویژگی rowspan تعداد سلول هایی را که باید به صورت عمودی ادغام شوند را تعیین می کند. اگر جدول دارای چندین ردیف باشد، هر دو صفت معنا پیدا می کنند. 1 2 3 4 1 2 3 4 پس زمینه میز. پس زمینه سلول های جدول در HTML امکان تنظیم یک پس زمینه کلی برای کل جدول و همچنین پس زمینه برای یک سلول انتخاب شده وجود دارد. ویژگی پس زمینه تگ تصویری را مشخص می کند که تصویر پس زمینه جدول باشد. مقدار مشخصه آدرس فایل را با تصویر مشخص می کند - یک مسیر مطلق یا نسبی به فایل (). ویژگی تگ bgcolor رنگ پس زمینه جدول را تعیین می کند. رنگ را می توان به دو صورت تنظیم کرد () با استفاده از همان ویژگی ها، می توانید تصویر پس زمینه و رنگ پس زمینه را برای هر سلول جدول تنظیم کنید ( برچسب زدن , و . هر یک از آنها را می توان برای تغییر برخی از ویژگی های یک یا چند ردیف جدول استفاده کرد: این دوباره هم ترازی محتویات سلول ها در ردیف ها به صورت افقی و عمودی است - به ترتیب با استفاده از ویژگی های align و valign. و تنظیم رنگ پس زمینه سلول ها با استفاده از ویژگی bgcolor. هنگام استفاده از این تگ ها، باید از چند تفاوت ظریف آگاه باشید که فقط تفاوت بین آنها را مشخص می کند. برچسب ها و باید قبل از برچسب قرار گیرد ، درست بعد از برچسب جدول باز کردن ). صورتی تیره رنگ پس زمینه میز است. تصویر پس زمینه تک سلولی آسمان است! همچنین وجود ویژگی cols تگ را به خاطر بیاورید ، که تعداد ستون های جدول را به مرورگر می گوید. استفاده از ویژگی cols به مرورگر اجازه می دهد تا محتویات جدول را سریعتر ارائه دهد. ویرایش جدول در این بخش، تگ هایی را در نظر خواهیم گرفت که هنگام ویرایش چندین عنصر جدول به طور همزمان استفاده می شوند. این برچسب ها را می توان به دو گروه تقسیم کرد. گروه اول شامل برچسب ها می شود و . آنها تقریباً یکسان هستند و برای تنظیم برخی از ویژگی ها و تغییر ویژگی های یک یا چند ستون از جدول استفاده می کنند. یکی از این تگ ها بلافاصله بعد از تگ قرار می گیرد . بیایید این برچسب را بگوییم . با استفاده از ویژگی span تگ تعداد ستون هایی را که صفات align , valign , یا width به آنها اعمال می شود را مشخص کنید ( محتویات سلول های ستون ها را به صورت افقی، عمودی تراز کنید یا عرض ستون ها را تنظیم کنید). اگر ویژگی span در تگ از دست رفته، سپس ویژگی های یک - ستون اول جدول تغییر خواهد کرد. بار دوم که از تگ استفاده می کنید خواص برای موارد زیر تنظیم شده است ( بعدی - اگر ویژگی span وجود نداشته باشد) ستون های جدول و غیره "2" عرض ="70px" > 1 2 3 4 5 1 2 3 4 5 دسته دوم تگ ها نیز شامل تگ های تقریباً یکسانی است . خطوط قرار داده شده در یک برچسب در بالای جدول و سطرهای محصور در تگ ارائه شده است در انتهای جدول قرار خواهد گرفت. هر دو تگ را فقط می توان یک بار در یک جدول اعمال کرد. برچسب بزنید می تواند چندین بار در یک برچسب استفاده شود . "right" 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 پیکسل، با سه ستون و سه ردیف درست کردیم! در اینجا کد این جدول آمده است. حال برای اینکه بفهمیم چگونه عرض یک جدول یا ستون را تغییر دهیم، اجازه دهید تعدادی اعداد را به کد خود تغییر داده و اضافه کنیم. جدول عرض = "500" - به 599 تغییر دهید. این صفحه بر روی جداول ساخته شده است، و عرض فیلد متن، i.e. جایی که این کلمات قرار دارند برابر با 600 پیکسل است. ما قادر خواهیم بود که: بیایید عرض ستون شماره 2 را 200 پیکسل کنیم: بیایید عرض ستون شماره 3 را 299 پیکسل کنیم: و ما این کد را دریافت می کنیم: به جدول ما نگاه کن حالا بیایید مقدار صفت width را به نصف = 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 را به سمت چپ تراز می کند

تراز "مرکز"- متن جدول html را با مرکز تراز می کند

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

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

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

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

با نوشتن یک صفت تراز "مرکز"در افتتاحیه

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

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

1x1	1.2	1x3
2.1	2x2	2.3

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

تراز عمودی توسط ویژگی تنظیم می شود:

align = "بالا"- محتوا در بالای سلول قرار می گیرد

تراز = وسط- محتوا در سلول متمرکز خواهد شد

align = "پایین"- محتوا در پایین سلول قرار می گیرد

بیایید به این ویژگی ها در مثال خود نگاه کنیم:

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

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

1x1	1.2	1x3
2.1	2x2	2.3

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

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

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

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

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

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

همانطور که می بینید، یک سلول 1x1 به طول دو سلول است. بر این اساس، طول آن برابر است با طول مجموع این دو سلول (160 پیکسل). ما مشخصه width را برای سلول 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 پیکسل در آوریم.

برای این تگ

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

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

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. جدول layout با خاصیت table-layout

چیدمان یک جدول با یکی از دو رویکرد تعیین می شود: چیدمان ثابت یا چیدمان خودکار. 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.3 ثانیه خطی؛ ) 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؛ حاشیه-چپ: 30px جامد #fff؛ رنگ: #669؛ بالشتک: 12px 2px؛ )

3. سبک "جعبه دار".

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

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

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

جدول ( فونت-خانواده: "Lucida Sans Unicode"، "Lucida Grande"، Sans-Serif؛ اندازه قلم: 14 پیکسل؛ حداکثر عرض: 70٪؛ عرض: 70٪؛ تراز نوشتاری: مرکز؛ کوچک کردن حاشیه: جمع کردن ؛ حاشیه بالا: 7 پیکسل توپر #9baff1؛ حاشیه پایین: 7 پیکسل توپر #9baff1؛ ) th (اندازه قلم: 13 پیکسل؛ وزن قلم: عادی؛ پس‌زمینه: #e8edff؛ حاشیه سمت راست: 1 پیکسل توپر #9baff1؛ حاشیه- سمت چپ: 1px جامد #9baff1؛ رنگ: #039؛ بالشتک: 8px؛ ) td (پس‌زمینه: #e8edff؛ حاشیه-راست: 1px جامد #aabcfe؛ حاشیه-چپ: 1px جامد #aabcfe؛ رنگ: #669؛ بالشتک: 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؛ بالشتک: 10 پیکسل؛ ) td (رنگ: #669؛ حاشیه بالا: 1px خط چین #fff؛ بالشتک: 10px؛ پس‌زمینه: #ccddff; ) tr:hover td (پس‌زمینه: #99bcff;)

جدول (حاشیه: 1px توپر #6cf;) th (وزن قلم: معمولی؛ اندازه قلم: 13px؛ رنگ: #039؛ تبدیل متن: بزرگ؛ حاشیه سمت راست: 1px جامد #0865c2؛ حاشیه بالا: 1px جامد #0865c2؛ حاشیه سمت چپ: 1px توپر #0865c2؛ حاشیه پایین: 1px جامد #fff؛ بالشتک: 20px؛ ) td (رنگ: #669؛ حاشیه-راست: 1px خط چین #6cf؛ بالشتک: 10px 20px؛ )

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

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

Png") 98% 86% بدون تکرار؛ ) th (وزن قلم: معمولی؛ اندازه قلم: 14 پیکسل؛ رنگ: #339؛ پد: 10 پیکسل 12 پیکسل؛ پس‌زمینه: سفید؛ ) td (رنگ: #669؛ حاشیه- بالا: 1px سفید ثابت؛ بالشتک: 10px 12px؛ پس‌زمینه: rgba(51، 51، 153، 0.2)، انتقال: 0.3s؛ ) tr:hover td (پس‌زمینه: rgba(51، 51، 153، 0.1); )

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

با این حال، قدرت 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 پیکسل؛ )

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

 

---

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