نحوه رنگ آمیزی یک خط در جدول css. انتخاب عناصر از یک نوع خاص با شاخص آنها

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

در این مقاله، شما را با پیچیدگی های استایل بندی جداول HTML آشنا می کنم و با ویژگی های جدید CSS که برای دستیابی به این اهداف طراحی شده اند، آشنا می شوید.

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

("پانویس" جدول) رنگ پس زمینه - مرجان، برای عنصر ("هدر جدول") رنگ پس زمینه را تنظیم کنید نقره.

برای عناصر

، که در داخل عنصر قرار دارند (بدنه جدول) رنگ پس زمینه را طوری تنظیم کنید که با شناور تغییر کند (کلاس شبه :hover) c سفیددر هر رنگ خاکی(کل خط برجسته شده است).

نتیجه مثال ما:

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

مثال زیر به اعمال گرد کردن گوشه به سلول‌های جدول (ویژگی) می‌پردازد.

) ما بالشتک پایین را روی 19 پیکسل قرار می دهیم. امیدوارم شماره های ناهموار شما را آزار ندهند :)

نتیجه مثال ما:

فضای بین سلول ها

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

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

فاصله مرزی: 30px 10px ؛

1	2	3
2
3

فاصله مرزی: 0;

1	2	3
2
3

فاصله بین مرزها: 0.2 em;

1	2	3
2
3

در این مثال ما:

• شناور به سمت چپ). اگر مبحث عناصر شناور را از دست داده اید، همیشه می توانید در این آموزش به آن بازگردید - "".
• علاوه بر این، حاشیه مناسب برای جداول را 30 پیکسل قرار می دهیم و تراز عمودی جداول را تنظیم می کنیم (بالای عنصر با بالای بلندترین عنصر تراز می شود). در این مقاله به بررسی دقیق این ویژگی خواهیم پرداخت.

) – سبک جسورانه.

برای سلول‌های جدول (سربرگ و سلول‌های داده)، یک حاشیه جامد 1 پیکسلی با رنگ #F50 هگز و 19 پیکسل در همه طرف‌ها قرار می‌دهیم.

برای جدول اول با کلاس .اولینفضای بین سلول های جدول (ویژگی فاصله مرزی) را برای جدول دوم با کلاس 30 پیکسل 10 پیکسل قرار می دهیم. .دومینبرابر با صفر ، برای جداول سوم با کلاس .سومبرابر با 0.2em

لطفاً توجه داشته باشید که اگر فقط یک مقدار طول در ویژگی border-spacing مشخص شده باشد، فواصل را به صورت افقی و عمودی نشان می دهد و اگر دو مقدار طول مشخص شده باشد، اولی فاصله افقی و دومی عمودی را مشخص می کند. . فاصله بین مرزهای سلول های مجاور را می توان در واحدهای CSS (px، cm، em و غیره) مشخص کرد. مقادیر منفی مجاز نیستند.

نتیجه مثال ما:

مرزهای اطراف سلولهای جدول را نشان دهید

می توانی بگویی: - بنابراین، ما فضای بین سلول ها را با استفاده از ویژگی border-spacing با مقدار 0 حذف کردیم، اما چرا مرزهای سلول ما اکنون قطع می شوند؟

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

برای انجام این کار، باید از ویژگی border-collapse CSS استفاده کنید. به اندازه کافی عجیب، استفاده از ویژگی border-collapse با مقدار collapse بهترین راه برای حذف فضای بین سلول ها بدون ایجاد مرزهای دوگانه بین آنها است.

بیایید رفتار مرزها را در هنگام استفاده از ویژگی border-spacing با مقدار 0 و ویژگی border-collapse با مقدار collapse مقایسه کنیم:

فاصله مرزی: 0;

1	2	3
2
3

border-collapse: فرو ریختن;

1	2	3
2
3

در این مثال ما:

• جداول خود را شناور کردیم و آنها را به سمت چپ منتقل کردیم (float: چپ)، حاشیه بیرونی آنها را در سمت راست روی 30 پیکسل قرار دادیم.
• نام جدول را تنظیم کنید (برچسب

) – سبک جسورانه.

برای سلول‌های جدول (سربرگ و سلول‌های داده)، یک حاشیه جامد 5 پیکسلی با رنگ هگزا #F50 تنظیم می‌کنیم و عرض ثابت 50 پیکسل و ارتفاع 75 پیکسل را تعیین می‌کنیم.

برای جدول اول با کلاس .اولینفضای بین سلول های جدول را صفر می کنیم (فاصله مرزی: 0 ;) و برای جدول دوم با کلاس .دومینویژگی border-collapse را روی collapse قرار دهید، که در صورت امکان مرزهای سلول ها را به یکی جمع می کند.

نتیجه مثال ما:

رفتار سلول های خالی

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

بیایید به یک مثال حرکت کنیم:

سلول های خالی: نمایش;

1	2	3
2		☺
3	☺

سلول های خالی: پنهان کردن.

1	2	3
2		☺
3	☺

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

محل سرصفحه جدول

بیایید به ویژگی ساده دیگری برای استایل دادن به جداول نگاه کنیم - caption-side , که موقعیت هدر جدول (بالا یا زیر جدول) را تعیین می کند. به طور پیش‌فرض، ویژگی Caption-side روی بالا تنظیم می‌شود که عنوان را بالای جدول قرار می‌دهد. برای قرار دادن عنوان زیر جدول، باید از ویژگی با مقدار پایین استفاده کنید.

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

سربرگ بالای جدول

نام	قیمت
ماهی	350 روبل
گوشت	250 روبل

سر به زیر جدول

نام	قیمت
ماهی	350 روبل
گوشت	250 روبل

در این مثال ما ایجاد کردیم دو کلاس، که موقعیت هدر جدول را کنترل می کند. کلاس اول ( .topCaption) عنوان جدول را بالای آن قرار می دهد، ما آن را روی جدول اول اعمال کردیم و کلاس دوم ( .bottomCaption) عنوان جدول را در زیر آن قرار می دهد، ما آن را در جدول دوم اعمال می کنیم. کلاس .topCaptionدارای مقدار ویژگی پیش فرض سمت عنوان است و برای اهداف نمایشی ایجاد شده است.

نتیجه مثال ما:

تراز افقی و عمودی

در بیشتر موارد، هنگام کار با جداول، باید تراز محتوا را در سلول‌های هدر و داده تنظیم کنید. ویژگی text-align برای تراز افقی، مشابه هر اطلاعات متنی استفاده می شود. ما قبلاً در مقاله "" در مورد استفاده از این ویژگی برای متن بحث کردیم.

برای تنظیم تراز برای محتوا در سلول ها، باید از کلمات کلیدی ویژه با ویژگی text-align استفاده کنید. بیایید استفاده از کلمات کلیدی برای این ویژگی را در مثال زیر بررسی کنیم.

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

در این مثال ما ایجاد کردیم چهار کلاس، که ترازهای افقی مختلف را در سلول ها مشخص می کند و آنها را به ترتیب در ردیف های جدول اعمال می کند. مقدار موجود در سلول با مقدار ویژگی text-align مطابقت دارد

نتیجه مثال ما:

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

لطفاً توجه داشته باشید که هنگام کار با سلول های جدول، فقط مقادیر * زیر این ویژگی اعمال می شود:

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

بیایید به یک مثال استفاده نگاه کنیم:

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

در این مثال ما ایجاد کردیم چهار کلاس، که ترازهای عمودی مختلف را در سلول ها مشخص می کند و آنها را به ترتیب در ردیف های جدول اعمال می کند. مقدار موجود در سلول مربوط به مقدار ویژگی vertical-align است که به آن سطر اعمال شده است.

الگوریتم قرار دادن طرح جدول در مرورگر

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

برای تغییر نوع طرح بندی جدول مرورگر با خودکاربر درست شد، باید از جدول-layout ویژگی CSS با مقدار ثابت استفاده کنید.

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

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

جدول بندی: خودکار;

نام	2009	2010	2011	2012	2013	2014	2015	2016
گندم	125	215	2540	33287	695878	1222222	125840000	125

جدول بندی: ثابت.

نام	2009	2010	2011	2012	2013	2014	2015	2016
گندم	125	215	2540	33287	695878	1222222	125840000	125

در این مثال ما:

استایل بندی ردیف ها و ستون های جدول

ما قبلاً در مقاله "" تا حدی روش هایی را برای استایل بندی ردیف ها و ستون های جدول لمس کرده ایم. در این مقاله، ما استفاده از گروه شبه کلاس را بررسی کردیم که به شما امکان می دهد سبک های ردیف را در جداول با استفاده از مقادیر جایگزین کنید. زوج (صادقانه) و فرد (فرد) یا به صورت ابتدایی فرمول ریاضی.

بیایید تکنیک‌هایی را که قبلاً پوشش دادیم مرور کنیم و روش‌های جدید برای استایل دادن به ردیف‌ها و ستون‌ها در جداول را بررسی کنیم. بیایید به سراغ مثال ها برویم.

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

در این مثال ما:

نتیجه مثال ما:

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

سرویس	قیمت
مجموع	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

در این مثال ما:

• عرض جدول را روی 100% عرض عنصر والد قرار می دهیم و یک مرز ثابت با عرض 1 پیکسل برای هدر و سلول های داده تعیین می کنیم.
• تنظیم برای عنصر

برچسب بزنید	شرح
. محتویات جدول را تعریف می کند. نام جدول را مشخص می کند. سلول هدر جدول را تعریف می کند. یک ردیف جدول را تعریف می کند. سلول داده جدول را تعریف می کند. برای حاوی سرفصل گروه در جدول (سرصفحه جدول) استفاده می شود. برای حاوی "بدنه" جدول استفاده می شود. برای حاوی "پانویس" جدول استفاده می شود. ویژگی های ستون مشخص شده را برای هر ستون در یک برچسب تعریف می کند گروهی از ستون ها را در جدول تعریف می کند. کار با تورفتگی جدول تورفتگی جدول 1 2 3 4 2 3 4 در این مثال ما: جدول را با استفاده از تکنیک مرکز افقی با تورفتگی های خارجی (حاشیه: 0 خودکار) در مرکز قرار دادیم. برای نام جدول (برچسب

1	2	3	4	5

در این مثال ما:

• جدول را با حاشیه های بیرونی در مرکز قرار دادیم، عرض و ارتفاع سلول های سرصفحه را روی 50 پیکسل قرار دادیم و مشخص کردیم شفافحاشیه 5 پیکسل
• ما مشخص کردیم که هنگام شناور کردن (شبه کلاس :hover) روی سلول هدر، یک پس‌زمینه دریافت می‌کند. آبیرنگ ها، نارنجیرنگ متن، حاشیه نارنجیرنگ ها 5 پیکسل و شعاع گرد 100٪.
• حاشیه شفافبرای رزرو فضا برای حاشیه لازم است، که هنگام شناور نمایش داده می شود؛ اگر این کار انجام نشود، جدول "پرش" می کند.

نتیجه مثال ما:

مثال زیر استفاده از عناصر HTML را پوشش می دهد و و سبک سازی آنها

شماره برنامه	سرویس	قیمت، مالش.	جمع
1	آواز خواندن	6 000	6 000
2	شستشو	2 000	2 000
3	تمیز کردن	1 000	1 000
4	آزار دهنده	1 500	1 500
5	خواندن	3 000	3 000

در این مثال ما:

نتیجه مثال ما:

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

در مثال قبلی متوجه شدیم که عنصر HTML شما می‌توانید فقط یک ویژگی CSS را اعمال کنید - رنگ پس‌زمینه (رنگ پس‌زمینه)، اما نمی‌توانید مستقیماً رنگ پس‌زمینه را هنگام شناور کردن (شبه کلاس :hover) روی این عنصر تنظیم کنید. در این مثال، نحوه برجسته کردن ستون جدول را تنها با استفاده از CSS بررسی خواهیم کرد.

شماره برنامه	سرویس	قیمت، مالش.	جمع
1	آواز خواندن	6 000	6 000
2	شستشو	2 000	2 000
3	تمیز کردن	1 000	1 000
4	آزار دهنده	1 500	1 500
5	خواندن	3 000	3 000

در این مثال ما:

• ما جدول خود را طوری تنظیم می کنیم که 100٪ عنصر والد را اشغال کند، سلول های جدول 25٪ از عنصر والد را اشغال کنند و یک حاشیه سبز رنگ ثابت 1 پیکسلی داشته باشند، ارتفاع هدر و سلول های داده 45 پیکسل است. ما فضای بین سلول ها را با استفاده از ویژگی border-collapse با مقدار حذف کردیم .
• و به این ترتیب، با استفاده از شبه عنصر :: پس از اضافه کردن محتوا پس از هر عنصر در شناور عنصر شبه ::after باید همراه با خاصیت content استفاده شود، به لطف آن عنصر بلوکی را وارد می کنیم که رنگ پس زمینه دارد. جنگل سبزو دارد موقعیت یابی مطلق.
• مکان یابی مطلق در اینجا برای جبران عنصر نسبت به لبه مشخص شده جد خود ضروری است، و جد باید مقدار موقعیتی غیر از مقدار پیش فرض داشته باشد - استاتیک، در غیر این صورت شمارش نسبت به لبه مشخص شده پنجره مرورگر خواهد بود. دلیلی که برای میز چیدیم موقعیت یابی نسبی(نسبت فامیلی).
• ما ویژگی top را برای بلوک تولید شده خود تنظیم می کنیم، که جهتی را که عنصر قرار گرفته از لبه بالایی جابجا می شود، و خاصیت bottom را مشخص می کند که جهتی را که عنصر قرار داده شده از لبه پایینی خارج می شود، مشخص می کند. برای هر دو ویژگی، مقدار 0 مشخص شد، بنابراین بلوک به طور کامل عنصر را از پایین و بالای جدول اشغال می کند، عرض این بلوک روی 25٪ تنظیم شد، این مقدار مطابق با عرض خود سلول است.
• و ویژگی نهایی که برای این بلوک تنظیم کردیم: z-index با مقدار "-1" ترتیب عناصر قرار گرفته را مطابق با آن تعیین می کند. محور Z. این ویژگی برای اینکه متن در جلوی این بلوک باشد و نه پشت آن ضروری است؛ اگر مقداری کمتر از صفر قرار ندهید، بلوک متن را پوشش می‌دهد.

نتیجه مثال ما:

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

سوالات و وظایف در مورد موضوع

قبل از اینکه به موضوع بعدی بروید، تکلیف تمرینی را کامل کنید:

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

2016-2019 دنیس بولشاکوف، می توانید نظرات و پیشنهادات خود را در سایت به آدرس [email protected] ارسال کنید.

ولاد مرژویچ

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

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

تنظیم خطوط بین خطوط بسیار ساده است؛ برای انجام این کار، ویژگی سبک border-bottom را به انتخابگر TD اضافه کنید. اگر حاشیه ای در اطراف میز وجود داشته باشد، حاشیه پایین دو برابر ضخامت خواهد بود. در این حالت، می توانید خط پایین را از ردیف آخر حذف کنید یا حاشیه پایین را از جدول پنهان کنید (مثال 1).

مثال 1: جداسازی ردیف های جدول با خطوط

	2004	2005	2006
یاقوت سرخ	43	51	79
زمرد	28	34	48
یاقوت کبود	29	57	36

در این مثال، خطوط عمودی بین سلول‌های هدر با استفاده از ویژگی border style اضافه می‌شوند که برای انتخابگر TH استفاده می‌شود. این یک فضای خالی یک پیکسلی بین حاشیه جدول و ناحیه هدر پس زمینه ایجاد می کند.

استفاده از رنگ، امکان تغییر ظاهر میز را افزایش می دهد. برای مثال، رنگ پس‌زمینه ردیف‌های زوج و فرد می‌تواند متفاوت باشد، همانطور که در شکل نشان داده شده است. 2.

برای تغییر رنگ پس‌زمینه ردیف‌های مورد نیاز، یک کلاس اضافی معرفی می‌کنیم، آن را زوج صدا می‌کنیم و شروع به اضافه کردن آن به ردیف‌های زوج جدول، یعنی به تگ می‌کنیم. . توجه داشته باشید که انتخابگر TR فقط می تواند رنگ پس زمینه را از طریق ویژگی پس زمینه تنظیم کند. هر خطی که برای انتخابگر TR تنظیم شده باشد نمایش داده نخواهد شد. بنابراین، با اعمال ویژگی border-bottom در انتخابگر TD (مثال 2) یک مرز پایین در سلول رسم می کنیم.

رنگ پس زمینه سطرهای فرد با تغییر رنگ کل جدول تعیین می شود. اما از آنجایی که یک رنگ جداگانه برای ردیف‌های انتخابی تنظیم شده است (که پارامتر class = "حتی" برای آن اضافه شده است)، با رنگ پس‌زمینه جدول "همپوشانی" دارد. با توجه به این، خطوط رنگی متناوب به دست می آید.

مثال 2. برجسته کردن ردیف های جدول با رنگ

	2004	2005	2006
یاقوت سرخ	43	51	79
زمرد	28	34	48
یاقوت کبود	29	57	36
آمیتیست ها	23	64	97

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

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

برچسب هایی که برای ساخت جدول در html استفاده می شود

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

کد مثال برای یک جدول ساده

نام جدول

استوبتس 1	استوبتس 2
متن در سلول اول	متن در سلول دوم

مرورگر نمایش داده خواهد شد

هدف جداول در html

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

ویژگی ها و پارامترهای جداول html: تورفتگی، عرض، رنگ پس زمینه، حاشیه (فریم)

U برچسب جدولویژگی های زیر وجود دارد:

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

بیایید با استفاده از یک مثال به استفاده از این ویژگی ها نگاه کنیم. برای انجام این کار، بیایید یک جدول ایجاد کنیم (اما قبلا بدون کپشن و برچسب th که به ندرت استفاده می شود) و پارامتر را روی ویژگی تنظیم کنید مرز, عرض (عرض جدول، ردیف یا سلول)و bgcolor (رنگ سلول)

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

قاب- مشخصه ای که قاب دور میز را نشان می دهد. مقادیر زیر وجود دارد:

خالی - بدون قاب،
بالا - فقط قاب بالایی،
زیر - فقط قاب پایین،
hsides - فقط قاب های بالا و پایین،
vsides - فقط فریم های چپ و راست،
lhs - فقط قاب سمت چپ،
rhs - فقط قاب سمت راست،
جعبه - هر چهار قسمت قاب.

قوانین- مشخصه ای که مرزهای درون جدول، بین سلول ها را نشان می دهد. مقادیر زیر وجود دارد:

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

بیایید به مثال کد نگاه کنیم

استوبتس 1	استوبتس 2

نتیجه

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

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

استوبتس 1	استوبتس 2
متن در خانه اول ستون اول	متن در سلول دوم ستون دوم

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

ردیف های tr و سلول های td در جداول HTML

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

برای تگ های tr و td موارد زیر وجود دارد

تراز کردن- تراز کردن متن در داخل یک سلول. لبه چپ (چپ)، لبه راست (راست)، مرکز (مرکز)
valign- تراز عمودی متن در داخل یک سلول. بالا (بالا)، پایین (پایین)، مرکز (وسط)
bgcolor- رنگ خط را تعیین می کند
عرض- عرض ستون (همه سلول های زیر این پارامتر را می پذیرند) به پیکسل یا به صورت درصد نشان داده شده است که در آن 100٪ عرض کل جدول است.
ارتفاع- ارتفاع سلول (همه سلول های ردیف این پارامتر را می پذیرند)

بیایید به کدی نگاه کنیم که در آن محتویات سلول ها (td) در امتداد لبه های مختلف تراز شده اند: در اولی به سمت چپ، در دومی به سمت راست:

استوبتس 1	استوبتس 2
متن در خانه اول ستون اول	متن در سلول دوم ستون دوم
استوبتس 1	استوبتس 2

نتیجه

با استفاده از جداول می توانید صفحه بسیار خوبی ایجاد کنید. فراموش نکنید که می توانید نه تنها متن را در سلول ها، بلکه تصاویر، پیوندها و غیره را نیز وارد کنید!)

با تشکر از توجه شما! امیدوارم مطالب مفید بوده باشد!

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

:first-child و :last-child

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

HTML و CSS زیر را در نظر بگیرید:

لیست میوه ها

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

استوبتس 1	استوبتس 2
متن در خانه اول ستون اول	متن در سلول دوم ستون دوم

< ! DOCTYPE html > < html lang = "en-US" > < head > < meta charset = "utf-8" > < title >: اول - فرزند و : آخر - فرزند< / title > < / head > < body > < h2 >لیست میوه ها< / h2 > < ul > < li >سیب< / li > < li >موز< / li > < li >بلوبری< / li > < li >پرتقال ها< / li > < li >توت فرنگی< / li > < / ul > < / body > < / html >

اسکرین شات زیر نتیجه را نشان می دهد.

هدر h2 و اولین li صورتی رنگ هستند زیرا: first-child به عناصر خاصی گره نخورده است. تگ h2 اولین فرزند تگ body و li اولین فرزند عنصر ul است. اما چرا عناصر لی باقیمانده سبز هستند؟ زیرا:last-child نیز به عنصر خاصی وابسته نیست و ul آخرین عنصر فرزند در تگ بدن است. در واقع در استایل های بالا *:first-child و *:last-child نوشتیم.

افزودن یک انتخابگر ساده به :first-child و :last-child آنها را مشخص تر می کند. بیایید انتخاب خود را فقط به موارد فهرست محدود کنیم. :first-child را با li:first-child و :last-child را با li:last-child جایگزین کنید. اسکرین شات زیر نتیجه را نشان می دهد.

:nth-child() و :nth-last-child()

این ایده بدی نیست که بتوانید اولین و آخرین عنصر فرزند را در یک سند انتخاب کنید. اگر لازم باشد عناصر زوج یا فرد را انتخاب کنید چه؟ شاید لازم باشد عنصر ششم را در درخت انتخاب کنیم یا برای هر عنصر فرزند سوم استایل ها را اعمال کنیم. شبه کلاس ها:nth-child() و:nth-last-child() در اینجا به ما کمک می کنند.

مانند :not، :nth-child() و :nth-last-child() نیز شبه کلاس های کاربردی هستند. آنها یک استدلال می گیرند که باید این باشد:

کلمه کلیدی عجیب و غریب

حتی کلمه کلیدی

یک مقدار صحیح از نوع 2 یا 8؛

آرگومان به شکل An+B، که در آن A مرحله، B افست و n یک متغیر عدد صحیح مثبت است.

استدلال آخر کمی پیچیده تر از بقیه است. کمی بعد به آن نگاه خواهیم کرد.

تفاوت بین :nth-child() و :nth-last-child() چیست؟ آنها در نقطه شروع متفاوت هستند: :nth-child() رو به جلو و :nth-last-child() به عقب شمارش می کند. شاخص های CSS از اعداد طبیعی استفاده می کنند و از 1 شروع می شوند نه 0.

با استفاده از کلاس های شبه:nth-child() و:nth-last-child() ایجاد الگوهای متناوب راحت است. میز راه راه یک مورد استفاده عالی است. CSS زیر به ردیف‌های زوج در جدول پس‌زمینه خاکستری مایل به آبی روشن می‌دهد، نتیجه را می‌توانید در تصویر زیر مشاهده کنید:

tr:nth-child(even) ( پس‌زمینه: rgba(96، 125، 139، 0.1)؛ )

tr : n - فرزند (حتی ) ( پس زمینه: rgba(96, 125, 139, 0.1);

اگر از:nth-child به:nth-last-child تغییر دهید، میله ها معکوس می شوند زیرا شمارش از پایین شروع می شود. اسکرین شات زیر را ببینید.

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

با استفاده از :nth-child() و :nth-last-child() می توانید یک عنصر خاص را انتخاب کنید. می‌توانید همه عناصر فرزند را بعد از یک موقعیت مشخص انتخاب کنید، یا می‌توانید عناصری را با چند افست انتخاب کنید. بیایید پس زمینه عنصر ششم را تغییر دهیم:

مورد:nth-child(6) ( پس زمینه: #e91e63; )

یک بار دیگر، A مرحله است. این یک فاکتور برای n است که از 1 شروع می شود. یعنی اگر A = 3 باشد، 3n عنصر سوم، ششم و نهم و غیره را انتخاب می کند. این دقیقاً همان چیزی است که در تصویر زیر قابل مشاهده است.

اینجا همه چیز کمی جالب تر است. با استفاده از :nth-child() و :nth-last-child() می توانید تمام عناصر را بعد از یک نقطه مشخص انتخاب کنید. بیایید همه عناصر به جز هفت مورد اول را انتخاب کنیم:

مورد:nth-child(n+8) ( پس زمینه: #e91e63; )

مورد : n - فرزند (n + 8 ) ( پس زمینه: #e91e63;

در اینجا هیچ مرحله ای مشخص نشده است. در نتیجه، n+8 همه عناصر n را انتخاب می کند، که از عنصر هشتم شروع می شود. اسکرین شات زیر را ببینید.

توجه: افست منفی

مقادیر و محدوده های منفی نیز معتبر هستند. ورودی مانند:nth-child(-n+8) انتخاب را معکوس می کند و هشت عنصر اول را انتخاب می کند.

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

مورد:nth-child(3n+5) ( پس زمینه: #e91e63; )

مورد : n - فرزند (3n + 5 ) ( پس زمینه: #e91e63;

نتیجه.

تک فرزند

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

• سیب

• نارنجی
• موز
• تمشک

< ul > < li >سیب< / li > < / ul > < ul > < li >نارنجی< / li > < li >موز< / li > < li >تمشک< / li > < / ul >

انتخابگر li:only-child (رنگ: #9c27b0;) انتخاب خواهد شد

سیب

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

:خالی

برای انتخاب عناصری که فرزند ندارند، می توانید از شبه کلاس :empty استفاده کنید. شبه کلاس: خالی برای خودش صحبت می کند (خالی از انگلیسی «خالی»). برای قرار گرفتن در انتخاب:empty، عنصر باید کاملاً خالی باشد، نه حتی فاصله. یعنی وارد نمونه می شود، اما نمی شود.

گاهی اوقات ویرایشگرهای WYSIWYG تگ های خالی p را در محتوای شما قرار می دهند. می توانید از :empty و :no استفاده کنید تا از اعمال استایل ها به این عناصر جلوگیری کنید. مثلا p:not(:empty).

انتخاب عناصر از یک نوع خاص با شاخص آنها

شبه کلاس های توضیح داده شده در بخش قبل، عناصری را در صورتی انتخاب می کنند که موقعیت خاصی را در درخت سند اشغال کنند. به عنوان مثال، p:nth-last-child(2) همه تگ های p را قبل از آخرین مورد داخل بلوک والد انتخاب می کند.

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

پنج شبه کلاس وجود دارد که نام آنها دقیقاً برعکس همتایان بدون تایپ آنها است:

nth-last-of-type()

مرز باریکی بین آنها و شبه کلاس های شاخص کودک وجود دارد. ورودی p:nth-child(5) فقط پنجمین تگ p را پیدا می کند، در حالی که ورودی p:nth-of-type(5) همه تگ های p را پیدا می کند و پنجمین تگ را انتخاب می کند.

بیایید یک سند دیگر ایجاد کنیم. همچنین دارای 20 عنصر است، فقط برخی از آنها تگ p و برخی دیگر div هستند. تگ های p با گوشه های گرد، تصویر زیر را ببینید.

آیا فکر نمی کنید که یک میز سیاه و سفید کمی خسته کننده به نظر می رسد؟ ما هم همین فکر را می کنیم! بنابراین در این آموزش در مورد نحوه تغییر رنگ جدول در HTML صحبت خواهیم کرد. سه گزینه برای افزودن رنگ وجود دارد که هر کدام ویژگی خاص خود را دارند.

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

قبلاً برای تغییر رنگ از شکل مختصرتری برای توصیف قاب استفاده می شد. او به این شکل بود:

حاشیه: 1 پیکسل خاکستری روشن

و قسمت آخر مسئول رنگ اینجا بود - لایت گی.

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

نحوه تغییر رنگ سلول

بیایید ببینیم کد در چه شکلی است CSS، که رنگ سلول را مشخص می کند.

Td (رنگ پس‌زمینه: رنگ پس‌زمینه؛ )

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

بیایید سبک هایی را برای سلول های سرصفحه با تگ اضافه کنیم هفتمو همچنین برای سلول های مورب حاوی مربع های اعداد:

جدول ضرب

*	2	3
2	4	6
3	6	9

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

نحوه تغییر رنگ حاشیه در جدول

همانطور که قبلاً در مثال بالا متوجه شدید، در جدول رنگ حاشیه را تغییر دادیم. برای این کار از ویژگی border استفاده کردیم. این پارامترها را به ترتیب ذکر شده در زیر تنظیم می کند:

1. نوع خط، در مورد ما جامد (جامد)
2. ضخامت خط، در مورد ما 1px
3. رنگ خط، در مورد ما آبی

اجازه دهید یک بار دیگر به یاد بیاوریم که تنظیم رنگ حاشیه برای یک سلول چگونه است:

Td (حاشیه: 1 پیکسل آبی ثابت؛ )

نحوه تغییر رنگ یک ردیف در جدول

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

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

RowGreen (رنگ پس زمینه: سبز؛ )

و برای تغییر رنگ خطوط خاص با استفاده از این کلاس، باید موارد زیر را انجام دهید:

جدول با رنگ های متناوب در ردیف

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

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

نحوه تغییر رنگ متن در جدول

برای تغییر رنگ متن در جدول، از ویژگی استفاده کنید رنگ. می توانید آن را روی عناصر مختلفی اعمال کنید: جدول، tr، th، td. بسته به این، رنگ در عنصر انتخاب شده تغییر می کند. به عنوان مثال، برای کل جدول، رنگ فونت را سبز می کنیم:

جدول (رنگ: سبز؛ ...)

به طور مشابه، می توانید رنگ را برای سلول های جداگانه تغییر دهید. و این درس به پایان می رسد، فراموش نکنید که تکالیف خود را انجام دهید. خداحافظ همه!