نحوه تنظیم عرض میز

24.04.2019 بررسی ها

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

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

ایجاد جداول در HTML

برای ایجاد یک جدول ساده HTML باید از سه نوع تگ استفاده کنید:

, و ، و بقیه بسیار نادر هستند. آیا فراموش کرده اید که "حاوی" به چه معناست؟ این بدان معنی است که در

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

نمونه ای از ایجاد جداول در HTML

ایجاد جداول HTML

سلول 1.1	سلول 1.2	سلول 1.3
سلول 2.1	سلول 2.2	سلول 2.3
سلول 3.1	سلول 3.2	سلول 3.3

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

سلول 1.1	سلول 1.2	سلول 1.3
سلول 2.1	سلول 2.2	سلول 2.3
سلول 3.1	سلول 3.2	سلول 3.3

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

برچسب بزنید

...

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

تعیین تگ های درون خطی یا بلوک در اولین سطح تودرتو ممنوع است.

برچسب بزنید

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

برچسب بزنید

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

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

و همچنین، اگر عرض سلول را مشخص کنید، اما محتوا در آن قرار نگیرد، مرورگر عرض شما را نادیده می گیرد و خود را تنظیم می کند.

در جداول HTML، عرض یک ستون همیشه برابر با وسیع ترین سلول آن است، که البته برای هر جدولی به طور کلی کاملا طبیعی است. بنابراین، با تغییر عرض یک (هر) سلول، عرض کل ستون را تغییر می دهید.

نمونه ای از تغییر عرض جداول و سلول های HTML

عرض جدول HTML و سلول ها

...

برچسب بزنید

...

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

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

جداول HTML در مرکز، چپ، راست

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

در گذشته در برچسب

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

style= "margin:0 auto 0 0" >...

- جدول در سمت چپ قرار دارد. این مقدار پیش فرض است.

style= "margin:0 0 0 auto" >...

- محل میز سمت راست است.

style= "margin:0 auto 0 auto" >...

- جدول HTML در مرکز.

حالا بزار توضیح بدم با استفاده از این مقادیر، اندازه حاشیه های بیرونی (padding) جدول را تغییر می دهیم. از آنجایی که جدول یک عنصر بلوکی HTML است و بلوک ها دارای چهار طرف هستند، پارامترها برای چهار طرف در جهت عقربه های ساعت مشخص می شوند: style= "حاشیه: بالا سمت راست پایین سمت چپ". خوب، من فکر می کنم شما متوجه شده اید که صفر چیست، اما "خودکار" به مرورگر می گوید که اندازه فضای خالی در این سمت را بر اساس مقادیر طرف های دیگر محاسبه کند. بنابراین معلوم می شود که اگر در سه طرف صفر باشد، در سمت چهارم بقیه فضا وجود دارد، و اگر در هر دو طرف "خودکار" وجود داشته باشد، تقسیم می کنیم. حاشیه های خارجیبه نصف

و مهمتر از همه، از استفاده از CSS به جای HTML خالص و در بسیاری از مواقع چوبی و قدیمی نترسید. از آنجایی که با این کار روی توسعه خود سرمایه گذاری می کنید و به آن باز نمی گردید تبرهای سنگی! علاوه بر این، من همه چیز را به شما "در یک بشقاب نقره ای" تقدیم می کنم. :)

نمونه ای از چیدمان میز در مرکز

HTML. میز وسط

سلول 1.1	سلول 1.2	سلول 1.3
سلول 2.1	سلول 2.2	سلول 2.3
سلول 3.1	سلول 3.2	سلول 3.3

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

سلول 1.1	سلول 1.2	سلول 1.3
سلول 2.1	سلول 2.2	سلول 2.3
سلول 3.1	سلول 3.2	سلول 3.3

تغییر عرض جداول و سلول های HTML

به طور پیش فرض، مرورگرها پهنای یک جدول را بر اساس محتویات سلول های آن محاسبه می کنند و شما می توانید آن را با استفاده از ویژگی آشنای width تغییر دهید، نحو کلی این است:

عرض = "شماره" >...

- هر عدد غیر منفی که عرض را بر حسب پیکسل نشان می دهد.

width= "تعداد%" >...

- یک عدد غیر منفی که عرض را به صورت درصد (%) بر اساس عرض ظرف والد، عنصری که جدول در آن قرار دارد، مشخص می کند.

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

اما هیچ ویژگی عرضی برای تغییر عرض سلول ها وجود ندارد، یا بهتر است بگوییم وجود داشته است، اما قدیمی است، بنابراین سبک ها (CSS) دوباره اعمال خواهند شد.

style= "width:value" >...

سلول 1.1	سلول 1.2
سلول 2.1	سلول 2.2

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

سلول 1.1	سلول 1.2
سلول 2.1	سلول 2.2

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

تغییر ارتفاع جداول و سلول های HTML

که در HTML استاندارددر برچسب

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

style= "height:value" >...

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

اما برای تغییر ارتفاع سلول ها در تگ های HTML و از این گذشته، یک ویژگی ارتفاع وجود داشت (پس این توسعه دهندگان را درک کنید)، اما منسوخ شده بود، بنابراین دوباره سبک ها.

style= "height:value" >...

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

مشخص نشده است - مرورگرها مقادیر سلول ها را نادیده می گیرند.

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

در جداول HTML، ارتفاع یک سطر (مانند عرض یک ستون) همیشه برابر با ارتفاع بلندترین سلول آن است. بنابراین، با تغییر ارتفاع یک (هر) سلول، ارتفاع کل ردیف را تغییر می دهید.

نمونه ای از تغییر ارتفاع جداول و سلول های HTML

عرض جدول HTML m سلول

سلول 1.1	سلول 1.2
سلول 2.1	سلول 2.2

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

سلول 1.1	سلول 1.2
سلول 2.1	سلول 2.2

تراز در جداول HTML

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

برای تغییر چینش محتوای جداول HTML وجود دارد صفات را تراز کنیدو valign که در تگ ها مشخص شده اند برای ردیف ها (ردیف ها) یا و برای سلول های فردی:

تراز افقی:

align= "left" - در سمت چپ سلول تراز کنید.

align= "center" - در مرکز.

align= "right" - در سمت راست.

چیدمان عمودی:

valign= "بالا" - در سمت بالای سلول تراز کنید.

valign= "middle" - در مرکز.

valign = "پایین" - در سمت پایین.

نمونه ای از تراز در جداول HTML

تراز در جدول HTML

سلول 1.1	سلول 1.2
سلول 2.1	سلول 2.2

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

سلول 1.1	سلول 1.2
سلول 2.1	سلول 2.2

پس زمینه جدول HTML

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

و اینجا تصویر پس زمینهدر میزها زبان HTMLبه هیچ وجه این مورد را ارائه نکرد، بنابراین زمانی تولید کنندگان مرورگر ویژگی پس زمینه را برای این کار معرفی کردند. مرورگرها هنوز آن را درک می کنند، اما دوباره، در درس تصاویر برای پس زمینهشما قبلاً یاد گرفته اید که چگونه تصاویر پس زمینه را برای هر عنصر به درستی تنظیم کنید.

مشق شب.

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

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

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

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

داخل یک تگ

سلول های جدول نشان داده شده توسط برچسب ها قرار دارند

یا

. این سلول ها حاوی تمام محتوای جدول نمایش داده شده در صفحه وب هستند.

قاب میز

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

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

خوشبختانه دوران طراحی های تک پیکسلی و انواع اسپیسرهای مبتنی بر آنها گذشته است. مرورگرها با جداول حتی بدون وجود محتویات سلول کاملاً درست کار می کنند.

ادغام سلول ها

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

Table, th, td (حاشیه: 1px مشکی یکدست؛ ) امتحان کنید »

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

حتی اگر فاصله‌های بین سلول‌ها را با استفاده از مقدار ویژگی border-spacing 0 حذف کنید، مرزهای سلول‌ها با یکدیگر تماس پیدا می‌کنند و اندازه را دو برابر می‌کنند. برای ترکیب مرزهای سلول، از ویژگی border-collapse استفاده کنید. می تواند دو معنی داشته باشد:

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

نام سند

نام	نام خانوادگی
هومر	سیمپسون
مارج	سیمپسون

نام	نام خانوادگی
هومر	سیمپسون
مارج	سیمپسون

تلاش كردن "

اندازه میز

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

Th, td ( padding: 7px; ) امتحان کنید »

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

جدول (عرض: 70%؛ ) هفتم (ارتفاع: 50 پیکسل؛ ) امتحان کنید »

تراز متن

به طور پیش‌فرض، متن در سلول‌های سرصفحه جدول تراز وسط است، در حالی که متن در سلول‌های معمولی تراز چپ است؛ با استفاده از ویژگی text-align می‌توانید تراز افقی متن را کنترل کنید.

ویژگی vertical-align CSS به شما امکان می دهد تراز عمودی محتوای متن را کنترل کنید. به طور پیش فرض، متن به صورت عمودی در مرکز سلول ها تراز می شود. تراز عمودی را می توان با استفاده از یکی از مقادیر ویژگی عمودی تراز کرد:

top: متن با حاشیه بالای سلول تراز می شود
وسط: متن را با مرکز تراز می کند (پیش فرض)
bottom: متن با حاشیه پایین سلول تراز شده است

نام سند

نام	نام خانوادگی
هومر	سیمپسون
مارج	سیمپسون

تلاش كردن "

تغییر رنگ پس‌زمینه ردیف‌های جدول

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

نام سند

نام	نام خانوادگی	موقعیت
هومر	سیمپسون	پدر
مارج	سیمپسون	مادر
بارت	سیمپسون	فرزند پسر
لیزا	سیمپسون	فرزند دختر

تلاش كردن "

افزودن یک ویژگی کلاس به هر خط دیگر بسیار خسته کننده است. شبه کلاس:nth-child به CSS3 اضافه شد تا راه حلی جایگزین برای این مشکل ارائه کند. اکنون می توان به طور انحصاری به اثر تناوب دست یافت با استفاده از CSSبدون تغییر نشانه گذاری HTML سند. با استفاده از شبه کلاس:nth-child، می توانید تمام ردیف های زوج یا فرد جدول را با استفاده از یکی از آنها انتخاب کنید. کلید واژه ها: زوج (زوج) یا فرد (فرد):

Tr:nth-child(odd) ( پس زمینه-رنگ: #EAF2D3; ) امتحان کنید »

تغییر پس‌زمینه ردیف در شناور

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

اجرای چنین افکتی بسیار ساده است؛ برای انجام این کار، باید یک شبه کلاس: شناور را به انتخابگر ردیف جدول اضافه کنید و تنظیم کنید. رنگ مورد نظرزمینه:

Tr:hover ( پس‌زمینه رنگ: #E0E0FF؛ ) امتحان کنید »

تراز کردن یک میز در مرکز

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

جدول ( حاشیه: 10 پیکسل خودکار؛ ) امتحان کنید »

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

جدول (حاشیه: 10 پیکسل خودکار 30 پیکسل؛ )

ولاد مرژویچ

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

عرض میز

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

عرض سلول

عرض سلول ها تعیین می شود صفت عرضبرچسب زدن

و اگر عرض سلول باید مشخص شود این مقدار باید تنظیم شود.

بیایید مثالی از موردی که باید اندازه سلول مشخص شود را در نظر بگیریم. بیایید فرض کنیم که باید دو ستون در یک صفحه وب ایجاد کنیم، یکی از آنها باید 200 پیکسل باشد و دومی باید فضای باقیمانده را اشغال کند. یک جدول با دو خانه ایجاد می کنیم و پارامتر width="200" را برای سلول سمت چپ تنظیم می کنیم (مثال 1). نیازی به تنظیم واحدهای اندازه گیری نیست، خود مرورگر متوجه می شود که اگر یک عدد مشخص شده باشد، از پیکسل ها استفاده می شود.

مثال 1. عرض سلول

جدول

ستون سمت چپ

ستون سمت راست

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

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

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

تصاویری که بزرگتر از عرض سلول هستند به یک سلول با عرض ثابت اضافه نمی شوند. روش، البته، بی اهمیت به نظر می رسد، با این حال، با دانستن ویژگی های سلول ها، می توانید از مشکلات نمایش آنها جلوگیری کنید.
برای برچسب زدن از ویژگی style-layout style با مقدار ثابت استفاده کنید. استفاده از این ویژگی به شما این امکان را می دهد که اگر تصویر کاملاً در سلول جا نمی شود (مثال 2) آن را برش دهید.
مثال 2. ویژگی table-layout
جدول

...

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

مرورگرهای مدرن (Firefox 3+, اینترنت اکسپلورر 8+، کروم و سافاری) جدول را کمی متفاوت نشان می دهند (شکل 2).

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

. بنابراین، شما باید یک برچسب را در داخل سلول قرار دهید

و یک ویژگی style برای آن تنظیم کنید (مثال 3). البته این کاملاً صحیح و راحت نیست، اما می تواند نتیجه لازم را بدهد.

مثال 3: نوارهای پیمایش در سلول ها

جدول

...

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

محتویات سلول

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

مرورگرهای قدیمی رنگ پس زمینه را نمایش نمی دادند سلول های خالینوع

سلول 1	سلول 2
سلول 3
سلول 4

برای وضوح، کد این جدول در مثال 4 نشان داده شده است.

مثال 4: جدول با سلول های ادغام شده

جدول

سلول 1	سلول 2
سلول 3
سلول 4

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

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

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

سرعت بارگذاری جدول

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

بر اساس این واقعیت، جداول برای ذخیره سازی استفاده نمی شود اطلاعات زیاد(از 100 کیلوبایت). و برای سرعت بخشیدن به لود چیدمان جدول به جداول جداگانه تقسیم می شود و یا از خاصیت table-layout استفاده می شود که استفاده از آن به شما این امکان را می دهد که کمی سرعت نمایش مطالب جدول را افزایش دهید.

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

عرض جدول با ویژگی width عنصر TABLE مشخص می شود. مقدار را می توان هم در واحدهای مطلق (width = "2 5 0") و هم در واحدهای نسبی (width = "80٪") مشخص کرد. به عنوان مثال، با تنظیم عرض روی 600 پیکسل، می توانید مطمئن باشید که جدول در هر وضوح مانیتور در پنجره مرورگر قرار می گیرد. اگر عرض به صورت درصد مشخص شود، از عرض پنجره مرورگر یا از عرض سلول جدول دیگری که این جدول در آن درج شده است، محاسبه می شود. همین کار را می توان با ارتفاع جدول با استفاده از ویژگی height انجام داد.

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

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

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

برنج. 3.9.عرض جدول 80 درصد عرض پنجره مرورگر است

برنج. 3.10.عرض و ارتفاع جدول 300 پیکسل است

عرض جدول اول 80 درصد اندازه پنجره مرورگر است و ستون اول این جدول 50 درصد از کل عرض جدول است. ارتفاع خط اول 100 پیکسل است.

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

لیست 3.4.عرض کد جدول 80 درصد عرض پنجره مرورگر

جدول ساده HTML

لیست 3.5.کد جدول با عرض 300 پیکسل

جدول ساده HTML

عرض میز 80%
سرفصل 1	سرفصل 2	سرفصل 3
سلول 2x1	سلول 2x2	سلول 2x3
سلول 3x1	سلول 3x2	سلول 3x3

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

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

برگرفته از کتاب اتوکد 2009 نویسنده اورلوف آندری الکساندرویچ

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

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

تغییر سلول های جدول برای تغییر سلول جدول، باید با ماوس روی آن کلیک کنید. نشانگرهای کنترل نمایش داده خواهند شد (شکل 4.45). برنج. 4.45. سلول جدول انتخاب شده با حرکت دادن نشانگر در حالی که دکمه ماوس را پایین نگه داشته اید، می توانید گروهی از سلول ها را انتخاب کنید. همچنین می توانید برجسته کنید

برگرفته از کتاب اتوکد 2010 نویسنده اورلوف آندری الکساندرویچ

ادغام سلول ها دو یا چند سلول در یک کاربرگ را می توان در یک صفحه ادغام کرد. ادغام سلول ها ممکن است ضروری باشد، به عنوان مثال، هنگام ایجاد یک هدر مشترک برای چندین ستون (شکل 3.15). برنج. 3.15. نمونه ای از ادغام سلول ها برای ادغام سلول ها، موارد زیر را انجام دهید

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

تغییر سلول های جدول برای تغییر سلول جدول، باید با ماوس روی آن کلیک کنید. در این حالت، نشانگرهای کنترلی نمایش داده می شوند (شکل 4.46). برنج. 4.46. سلول جدول انتخاب شده با حرکت دادن نشانگر در حالی که دکمه ماوس را پایین نگه داشته اید، می توانید گروهی از سلول ها را انتخاب کنید. شما همچنین می توانید

از کتاب XSLT نویسنده هولزنر استفان

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

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

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

از کتاب HTML، XHTML و CSS 100% نویسنده کوینت ایگور

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

از کتاب نویسنده

11. علائم عرض دست خط از چپ به راست (شکل 191): شکل. 191 خط عریض ( مسافت های طولانیبین حروف)؛ دست خط باریک (فاصله های کوچک بین حروف)؛ عرض متغیر؛ حروف باریک، اما با فاصله های گسترده بین

از کتاب نویسنده

3.7. تراز کردن محتویات جدول و سلول برای تراز کردن عناصر جدول به صورت افقی و عمودی در عناصر TABLE، TR، TH و TD، از ویژگی های align و valign استفاده کنید. ویژگی align برای همه عناصر جدول اعمال می شود و کلیت را تعیین می کند. تراز افقی:

از کتاب نویسنده

3.8. ادغام سلول های جدول در عمل، تعداد زیادی جدول وجود دارد که در آنها یک سلول چندین سلول را در ارتفاع و عرض ترکیب می کند (شکل 3.2 را ببینید). در HTML، سلول ها با استفاده از ویژگی های colspan و rowspan ترکیب می شوند. ویژگی colspan تعداد سلول ها را در هر مشخص می کند

از کتاب نویسنده

Font width ویژگی font-weight پهنای فونت را تعیین می کند. مقدار را می توان به عنوان یک عدد از 100 تا 900 (در صدها) مشخص کرد، که در آن هر عدد نشان دهنده فونتی است که تیره تر از نسخه قبلی خود است. در موارد دیگر مقدار ممکن است به شرح زیر باشد. عادی - متن عادی نمایش داده می شود

از کتاب نویسنده

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

از کتاب نویسنده

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

از کتاب نویسنده

عرض حاشیه ویژگی های border-top-width، border-right-width، border-bottom-width، border-left-width را در نظر بگیرید که به ترتیب پهنای حاشیه های بالا، راست، پایین و چپ عنصر صفحه را تعیین می کنند. تمام ویژگی های مورد بحث در این بخش می توانند یکی از موارد زیر را داشته باشند

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

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

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

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

عرض میز 300 پیکسل
سرفصل 1	سرفصل 2	سرفصل 3
سلول 2x1	سلول 2x2	سلول 2x3
سلول 3x1	سلول 3x2	سلول 3x3

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

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

هدف جداول در html

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

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

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

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

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

جدول HTML

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

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

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

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

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

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

جدول HTML

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

نتیجه

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

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

جدول HTML

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

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

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

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

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

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

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

جدول HTML

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

نتیجه

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

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