برای بازدیدکننده باید آسان باشد که اطلاعات مورد نظر خود را در صفحه پیدا کند. برای این کار و همچنین برای بیان برخی از عبارت ها از تگ های HTML مختلف استفاده می شود. این مقاله در مورد تفاوت های ظریف کار با جداول، به ویژه - تراز آنها بحث خواهد کرد.
اول از همه، لازم به ذکر است که این فرم گرافیکی ارائه داده ها به شما امکان می دهد اطلاعات را ساختار دهید، که تا حد زیادی جذب آن را تسهیل می کند. تقریباً هر محتوایی می‌تواند در سلول‌های جدول باشد: از متن تا ویدیو. مهم است که نه تنها اندازه، بلکه مکان آن را نیز در نظر بگیرید.
بیشتر اوقات، شما باید جدول را در مرکز صفحه مرتب کنید، اگرچه در ابتدا در سمت چپ صفحه فشار داده می شود. برای تراز کردن آن در مرکز، باید ویژگی margin را روی auto تنظیم کنید.
این منجر به این واقعیت می شود که تورفتگی جدول به طور خودکار محاسبه می شود. پس از آن، جدول در مرکز صفحه قرار می گیرد.
به همان اندازه، شما باید داده ها را با مرکز یک سلول تراز کنید. در این صورت سه راه افقی، عمودی و مطلق وجود دارد. از نام آنها مشخص می شود که مرکز گذاری در کدام محور صورت می گیرد. به هر حال از تگ استفاده می شود
مسئول یک سلول خاص در یک ردیف است. در مرحله بعد، باید بسته به وظیفه خود، ویژگی های valign (عمودی) و / یا تراز (افقی) آن را به "مرکز" اختصاص دهید:
اگر می خواهید این قالب بندی را برای کل سایت یا صفحه استاندارد کنید (به طوری که هر جدول را بازنویسی نکنید)، باید از سبک های CSS استفاده کنید. برای این کار کد زیر را داخل تگ اضافه کنید :
با استفاده از این روش، می‌توانید تراز را برای یک سلول خاص و همچنین برای یک ستون، ردیف یا کل جدول تنظیم کنید. همانطور که می بینید، هر یک از روش ها بسیار ساده است.
من فکر می‌کنم بسیاری از شما که چیدمان را انجام داده‌اید، با نیاز به تراز کردن عناصر به صورت عمودی مواجه شده‌اید و می‌دانید هنگام تراز کردن یک عنصر با مرکز چه مشکلاتی پیش می‌آید. بله، برای تراز عمودی، CSS دارای ویژگی عمودی-align ویژه با مقادیر متعدد است. اما در عمل اصلاً آنطور که انتظار می رود کار نمی کند. بیایید سعی کنیم آن را بفهمیم.
بیایید رویکردهای زیر را با هم مقایسه کنیم. تراز کردن با: - جداول،
- تورفتگی،
- ارتفاع خط،
- کشش،
- حاشیه منفی،
- تبدیل،
- شبه عنصر،
- فلکس باکس
به عنوان مثال، مثال زیر را در نظر بگیرید. 
دو div وجود دارد که یکی در دیگری تودرتو است. بیایید کلاس های مربوطه را به آنها بدهیم - بیرونی و درونی.
چالش این است که عنصر داخلی را با مرکز عنصر بیرونی تراز کنید.ابتدا موردی را در نظر بگیرید که ابعاد یونیت های خارجی و داخلی شناخته شده... بیایید صفحه نمایش را اضافه کنیم: inline-block به عنصر داخلی، و text-align: مرکز و تراز عمودی: وسط به خارجی. به یاد دارم که تراز فقط برای عناصری اعمال می شود که حالت نمایش درون خطی یا بلوک درون خطی دارند. بیایید اندازه بلوک‌ها و رنگ‌های پس‌زمینه را برای دیدن حاشیه‌های آنها در نظر بگیریم. بیرونی (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ تراز نوشتاری: مرکز؛ تراز عمودی: وسط؛ رنگ پس‌زمینه: #ffc؛) .داخلی (نمایش: بلوک درون خطی؛ عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ پس‌زمینه رنگ : #fcc;)
پس از اعمال سبک ها، می بینیم که بلوک داخلی به صورت افقی تراز شده است، اما نه به صورت عمودی:
http://jsfiddle.net/c1bgfffq/ چرا این اتفاق افتاد؟نکته این است که ویژگی vertical-align بر تراز کردن تأثیر می گذارد. خود عنصر، نه محتوای آن(به جز زمانی که برای سلول های جدول اعمال می شود). بنابراین، اعمال این ویژگی برای یک عنصر خارجی هیچ کاری انجام نداد. علاوه بر این، اعمال این ویژگی برای یک عنصر داخلی نیز کاری از پیش نمی برد، زیرا بلوک های درون خطی به صورت عمودی نسبت به بلوک های مجاور تراز هستند و در مورد ما یک بلوک درون خطی داریم. چندین تکنیک برای حل این مشکل وجود دارد. در زیر نگاهی دقیق تر به هر یک از آنها خواهیم داشت. با یک جدول تراز کنیداولین راه حلی که به ذهن می رسد این است که بلوک بیرونی را با یک جدول تک سلولی جایگزین کنید. در این مورد، تراز به محتویات سلول، یعنی بلوک داخلی اعمال می شود.
http://jsfiddle.net/c1bgfffq/1/عیب آشکار این راه حل این است که از نظر معناشناسی استفاده از جداول برای تراز اشتباه است. دومین اشکال این است که برای ایجاد جدول، باید عنصر دیگری را در اطراف بلوک بیرونی اضافه کنید. اولین منهای را می توان با جایگزین کردن تگ های جدول و td با div و تنظیم حالت نمایش جدول در CSS تا حدی حذف کرد.
.outer-wrapper (نمایش: جدول؛) .outer (نمایش: جدول-سلول؛)
با این وجود، بلوک بیرونی همچنان یک جدول با تمام عواقب بعدی باقی خواهد ماند.تراز کردن با تورفتگی هااگر ارتفاع جعبه های داخلی و خارجی مشخص باشد، می توان با استفاده از لایه بندی عمودی جعبه داخلی با استفاده از فرمول: (H بیرونی - H داخلی) تراز را تنظیم کرد. بیرونی (ارتفاع: 200 پیکسل؛) داخلی (ارتفاع: 100 پیکسل؛ حاشیه: 50 پیکسل 0؛)
http://jsfiddle.net/c1bgfffq/6/ نقطه ضعف راه حل این است که فقط در موارد محدودی که ارتفاع هر دو بلوک مشخص باشد قابل استفاده است. تراز با ارتفاع خطاگر می دانید که بلوک داخلی نباید بیش از یک خط متن را اشغال کند، می توانید از ویژگی line-height استفاده کنید و آن را برابر با ارتفاع بلوک بیرونی قرار دهید. از آنجایی که محتوای بلوک داخلی نباید به خط دوم بپیچد، توصیه می شود فضای سفید را نیز اضافه کنید: nowrap و overflow: قوانین پنهان. بیرونی (ارتفاع: 200 پیکسل؛ ارتفاع خط: 200 پیکسل؛) .داخلی (فضای سفید: nowrap؛ سرریز: پنهان؛)
http://jsfiddle.net/c1bgfffq/12/ همچنین می‌توانید از این تکنیک برای تراز کردن متن چند خطی با تعریف مجدد مقدار ارتفاع خط برای بلوک داخلی و افزودن نمایشگر: بلوک درون خطی و تراز عمودی: قوانین میانی استفاده کنید. بیرونی (ارتفاع: 200 پیکسل؛ ارتفاع خط: 200 پیکسل؛) داخلی (ارتفاع خط: معمولی؛ نمایشگر: بلوک درون خطی؛ تراز عمودی: وسط؛)
http://jsfiddle.net/c1bgfffq/15/ عیب این روش این است که ارتفاع بلوک خارجی باید مشخص باشد. تراز کششیاین روش زمانی قابل استفاده است که ارتفاع یونیت خارجی مشخص نیست، اما ارتفاع یونیت داخلی مشخص است. برای این شما نیاز دارید: - موقعیت نسبی بلوک بیرونی و داخلی - مطلق را تنظیم کنید.
- قوانین بالا: 0 و پایین: 0 را به بلوک داخلی اضافه کنید، در نتیجه تا ارتفاع کامل بلوک بیرونی کشیده می شود.
- برای بالشتک عمودی بلوک داخلی روی خودکار تنظیم کنید.
بیرونی (موقعیت: نسبی؛) داخلی (ارتفاع: 100 پیکسل؛ موقعیت: مطلق؛ بالا: 0؛ پایین: 0؛ حاشیه: خودکار 0؛)
http://jsfiddle.net/c1bgfffq/4/ ماهیت این تکنیک این است که تعیین ارتفاع برای یک کادر کشیده و کاملاً در موقعیت، مرورگر را مجبور می‌کند تا هنگام تنظیم روی خودکار، حاشیه‌های عمودی را به نسبت مساوی محاسبه کند. تراز کردن با حاشیه منفی بالااین روش به طور گسترده ای شناخته شده است و بسیار مورد استفاده قرار می گیرد. مانند مورد قبلی، زمانی که ارتفاع بلوک بیرونی نامشخص است، اما ارتفاع بلوک داخلی مشخص است، اعمال می شود. شما باید موقعیت نسبی بلوک بیرونی را تنظیم کنید، و داخلی - مطلق. سپس باید جعبه داخلی را تا نصف ارتفاع بالای جعبه بیرونی پایین بیاورید: 50% و آن را تا نصف ارتفاع حاشیه بالای جعبه بالا ببرید: -H داخلی / 2. بیرونی (موقعیت: نسبی؛) داخلی (ارتفاع: 100 پیکسل؛ موقعیت: مطلق؛ بالا: 50 درصد؛ حاشیه بالا: -50 پیکسل؛)
http://jsfiddle.net/c1bgfffq/13/ عیب این روش این است که ارتفاع یونیت داخلی باید مشخص باشد. همسویی با تبدیلاین روش مشابه روش قبلی است، اما زمانی که ارتفاع یونیت داخلی نامشخص است می توان آن را اعمال کرد. در این حالت، به جای تنظیم یک لایه منفی پیکسل، می توانید از ویژگی transform استفاده کنید و بلوک داخلی را با استفاده از تابع translateY و مقدار -50٪ به سمت بالا حرکت دهید. بیرونی (موقعیت: نسبی؛) درونی (موقعیت: مطلق؛ بالا: 50%؛ تبدیل: translateY (-50%)؛)
http://jsfiddle.net/c1bgfffq/9/ چرا در روش قبلی نمی توان درصد تعیین کرد؟ از آنجایی که مقادیر درصدی ویژگی margin نسبت به عنصر والد محاسبه می شود، مقدار 50% نصف ارتفاع جعبه بیرونی خواهد بود و ما باید ارتفاع جعبه داخلی را نصف می کنیم. ویژگی transform برای این کار مناسب است. عیب این روش این است که اگر بلوک داخلی دارای موقعیت مطلق باشد، نمی توان آن را اعمال کرد. با Flexbox تراز کنیدمدرن ترین راه برای تراز عمودی استفاده از طرح بندی جعبه انعطاف پذیر (که به عنوان فلکس باکس معروف است) است. این ماژول به شما این امکان را می دهد که به طور انعطاف پذیر موقعیت عناصر را در صفحه کنترل کنید و آنها را تقریباً همانطور که دوست دارید قرار دهید. تراز مرکزی برای Flexbox یک کار بسیار ساده است. کادر بیرونی باید روی صفحه نمایش: flex و جعبه داخلی باید روی حاشیه: auto تنظیم شود. و این همه است! زیباست، نه؟ بیرونی (نمایشگر: انعطاف پذیر؛ عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛) .داخلی (عرض: 100 پیکسل؛ حاشیه: خودکار؛)
http://jsfiddle.net/c1bgfffq/14/ عیب این روش این است که Flexbox فقط توسط مرورگرهای مدرن پشتیبانی می شود. کدام راه را انتخاب کنیم؟لازم است از بیان مسئله اقدام شود: - برای تراز عمودی متن، بهتر است از padding عمودی یا ویژگی line-height استفاده کنید.
- برای عناصر کاملاً قرار گرفته با ارتفاع مشخص (مانند نمادها)، ویژگی منفی حاشیه بالای ایده آل است.
- برای موارد پیچیده تر، زمانی که ارتفاع بلوک ناشناخته است، باید از یک شبه عنصر یا ویژگی تبدیل استفاده کنید.
- خوب، اگر آنقدر خوش شانس هستید که نیازی به پشتیبانی از نسخه های قدیمی IE ندارید، پس البته بهتر است از Flexbox استفاده کنید.
برچسب‌ها: افزودن برچسب
یا جدول HTML و خصوصیات سلول با مثال
ما به مطالعه ادامه می دهیم جداول HTML... این درس نحوه نصب را به شما آموزش می دهد اندازه میز، محتویات آن یا به عبارت بهتر محتویات سلول ها را به صورت عمودی و افقی تراز کنید. شما همچنین یاد خواهید گرفت که چگونه تعیین کنید هدر جدول HTML.
پیمایش در صفحه
عرض و ارتفاع سلول جدول HTML (اندازه سلول)
ارتفاع و عرض سلول HTML، اندازهبا ویژگی های زیر تعریف می شود:
ابعاد سلول اول از ردیف اول مشخص شد. در نتیجه، سلول دوم همان ردیف، ارتفاع ردیف اول را به ارث برد و سلول اول ردیف دوم، عرض آن (عرض سلول اول، ردیف اول) را به ارث برد. این ویژگی تعامل عناصر است جداول HTML.
تراز افقی HTML در یک جدول و در یک سلول، متن
تراز HTML در جدول. متن چپ، راست، وسط در سلول های جدول:
نتیجه:
نتیجه:
نتیجه:
برچسب ها | هر جدولی از ستون و ردیف تشکیل شده است.
نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی پرتال اطلاعاتی
