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

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

تمام عناصر جدول و همچنین ویژگی های خود در دسترس هستند.

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

• محتوا:

1. نحوه ایجاد جدول

جدول با استفاده از یک جفت تگ ایجاد می شود

عکس. 1. ظاهر جدول بدون قالب بندی خصوصیات css

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

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

فاصله بین سلول های جدولبا استفاده از ویژگی جدول (border-collapse: collapse;) حذف شد.

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

/ * عرض جدول را برابر با عرض بلوک ظرف در * / جدول (عرض: 100٪؛) / * یک عرض ثابت برای جدول * / جدول تعیین می کند (عرض: 600 پیکسل؛)

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

2. نحوه ایجاد ردیف (ردیف) از یک جدول

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

... تعداد ردیف های افقی در جدول با تعداد تگ های جفت شده تعیین می شود .

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

یک عنوان ستون ایجاد می کند - یک سلول خاص که متن در آن به صورت پررنگ برجسته شده است. تعداد سلول های هدر با تعداد جفت های برچسب تعیین می شود

4. چگونه یک سلول از بدنه جدول بسازیم

سلول های جدول را ایجاد می کند که داده های جدول در داخل آنها قرار می گیرد. برچسب های جفت شده واقع در همان ردیف تعداد سلول های ردیف جدول را تعیین می کند. تعداد جفت سلول باید برابر با تعداد جفت سلول ها باشد... ویژگی های colspan، rowspan، headers برای عنصر موجود است.

5. نحوه افزودن عنوان (عنوان) به جدول

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

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

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

7. گروه بندی بخش های جدول

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

وبرای نشان دادن هر قسمت از جدول

عنصر باید به ترتیب زیر استفاده شود: به عنوان یک کودک

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

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

و .

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

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

ویژگی های colspan و rowspan سلول های جدول را ترکیب می کنند. ویژگی colspan تعداد سلول‌های ادغام شده به صورت افقی و پهنای ردیف را به صورت عمودی مشخص می‌کند.


برنج. 3. نمونه ای از ترکیب سلول های جدول به صورت افقی با استفاده از ویژگی colspan

9. ویژگی های عناصر جدول

جدول 1. ویژگی های عناصر جدول

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

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

10. نمونه ای از ایجاد جدول


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

نشانه گذاری HTML

منوی رستوران روماشکا

آشپزخانه	ظروف سرد		غذاهای گرم		دسرها
	سالاد	تنقلات، خوراک مختصر	اولین وعده غذایی	دوره های دوم
روسی	وینیگرت	ترب زبان	سوپ کلم با کلم ترش	کوفته سیب زمینی	سیب پخته شده با عسل
	سالاد اولیویه	ژله گوشت گاو	ترشی خانگی	کپور صلیبی پخته شده در خامه ترش	کیک پنکیک
	شاه ماهی زیر "کت خز"	سوف ژله ای پایک	هوج گوشت	کتلت پوژارسکی	کیک "سیب زمینی"
اسپانیایی	گوش ماهی سرویچه	امپاناداس	سوپ نان سیر	پائلا با غذاهای دریایی	چوروس
	آووکادو و تن ماهی تن	آهوتومات	فابادا اتریشی	راکسو گوشت خوک	آلموشاونا
	لوبیا با ژامبون	چانگفاین	سوپ ماهی با کوفته بلغور	تورتیلا سیب زمینی	بونوئلوس
فرانسوی	سالاد Vosges	رایت مرغ	سوپ خامه ای بادمجان "رنوار"	سیب زمینی محدود است	بریوش
	سالاد پانزانلا	پنیر خوشمزه	سوپ کدو تنبل فرانسوی	گراتن مرغ	پای لیمو لیگوریایی
	تارتاروس	ماهی قزل آلا ترشی	سوپ کنتی	تارتفلت	ساوارین "پیروزی"

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

بنابراین، چگونه یک جدول ساده در HTML بسازیم?
برای ساخت جدول باید از سه تگ استفاده کنید:

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

جدول از یک ردیف تشکیل شده است

ردیف 1	ردیف 1
ردیف 2	ردیف 2
ردیف 3	ردیف 3

سلول 1	سلول 2
سلول 1	سلول 2
سلول 1	سلول 2

TR – یک ردیف جدید از جدول ایجاد می کند. تگ پایان ضروری.

TD – یک سلول جدید در ردیف ایجاد می کند. تگ پایان ضروری.

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

ردیف 1 سلول 1	ردیف 1 سلول 2
ردیف 2 سلول 1	ردیف 2 سلول 2
ردیف 3 سلول 1	ردیف 3 سلول 2

نتیجه این است:

ردیف 1 سلول 1	ردیف 1 سلول 2
ردیف 2 سلول 1	ردیف 2 سلول 2
ردیف 3 سلول 1	ردیف 3 سلول 2

بگذارید همه چیز را توضیح دهم.
هر بار که یک جدول جدید ایجاد می شود، یک برچسب باز می شود.

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

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

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

.

فکر کنم متوجه شدی؟ اگر کسی فراموش کرده باشد که یک ویژگی چیست مرزکه من از آن به همراه تگ استفاده می کنم

، یادآوری می کنم که این ضخامت قاب است. اگر در مرزروی "0" تنظیم می شود، سپس مرزهای جدول نامرئی خواهند بود.

چند نمونه را بررسی کنید جداول ایجاد کردو می توانید ادامه دهید:

ردیف 1 سلول 1

ردیف 2 سلول 1

نتیجه:

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

در خط بین برچسب ها درج یک تصویر

ردیف 1 سلول 1

ردیف 1 سلول 2

نتیجه:

ردیف 1 سلول 1

ردیف 1 سلول 2

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

برای ترکیب سلول ها در جدول، باید از ویژگی هایی مانند زیر استفاده کنید:
کلسپان- تعداد ستون ها را تعیین می کند.
پیش فرض 1 است.
ROWSPAN- تعداد ردیف ها را تعیین می کند.
پیش فرض 1 است.

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

ردیف 1 سلول 1 + 2
ردیف 2 سلول 1	ردیف 2 سلول 2

نتیجه:

چگونه اندازه میز را تنظیم کنم؟

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

WIDTH- عرض میز اندازه بر حسب پیکسل یا درصد تنظیم می شود.
HEIGHTارتفاع میز است. اندازه بر حسب پیکسل یا درصد تنظیم می شود.

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

نتیجه:

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

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

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

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

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

نتیجه:

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

همچنین می‌توانید پس‌زمینه جدول را برای تمام سلول‌های آن و همچنین برای هر سلول جداگانه تنظیم کنید. می توانید پس زمینه را با یک رنگ یا با یک عکس تنظیم کنید. دو ویژگی برای پس زمینه وجود دارد:

BGCOLOR- رنگ پس زمینه برای کل جدول یا برای هر سلول به طور جداگانه. رنگ توسط یک کد یا کلمه تنظیم می شود.
زمینه- پس زمینه در جدول با یک تصویر پر شده است.

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

... و اگر فقط به یک سلول خاص، سپس برچسب

. برای درک بهتر، به یک مثال نگاه کنید: ردیف 1 سلول 1 ردیف 1 سلول 2 ردیف 2 سلول 1 ردیف 2 سلول 2 نتیجه: توجه:اگر اندازه عکس در هر سلول کوچک‌تر باشد، آنقدر تکرار می‌شود تا سلول تا انتها پر شود. اگر تصویر بزرگتر از سلول باشد، پس زمینه تصویر متناسب با اندازه سلول برش داده می شود. و در نهایت، من به شما بیشتر در مورد دو ویژگی مفید. اگر به طور ناگهانی می خواهید فاصله بین تمام سلول ها را افزایش دهید، ویژگی های زیر به شما کمک می کند: cellpadding-فاصله بین کادر هر سلول جدول html و محتوای مواد موجود در آن. ردیف 1 سلول 1 ردیف 1 سلول 2 ردیف 2 سلول 1 ردیف 2 سلول 2 نتیجه: ردیف 1 سلول 1 ردیف 1 سلول 2 ردیف 2 سلول 1 ردیف 2 سلول 2 فاصله سلولی-فاصله بین مرزهای سلول های همسایه ردیف 1 سلول 1 ردیف 1 سلول 2 ردیف 2 سلول 1 ردیف 2 سلول 2 نتیجه: ردیف 1 سلول 1 ردیف 1 سلول 2 ردیف 2 سلول 1 ردیف 2 سلول 2 فوه، گفته شد! امیدوارم با این کار کنار آمده باشم و همه چیزهایی را که می دانستم توضیح داده باشم جداول html... و برای شما توصیه می کنم که مواد را به خوبی تعمیر کنید. سعی کنید جدول خود را بسازید، یا به عبارت بهتر یک اسکلت کامل برای یک صفحه وب از یک جدول html ایجاد کنید. بهترینها برای شما! از اینکه به وبلاگ من سر زدید متشکرم با توجه به تطبیق پذیری جداول، تعداد زیاد پارامترهایی که ظاهر آنها را کنترل می کنند، جداول مدت هاست که به یک استاندارد قطعی برای چیدمان صفحات وب تبدیل شده اند. یک جدول با حاشیه نامرئی مانند یک شبکه مدولار است که در بلوک های آن قرار دادن عناصر یک صفحه وب راحت است. با این حال، این روش کاملاً درستی نیست، زیرا هر شی HTML برای اهداف خود تعریف می شود و اگر برای اهداف دیگری استفاده شود، و علاوه بر این، به این معنی است که هیچ جایگزینی وجود ندارد. این مورد برای مدت طولانی بود، تا اینکه لایه‌ها جایگزین جداول در طرح‌بندی سایت شدند. این بدان معنا نیست که اکنون لایه‌ها همیشه استفاده می‌شوند، اما روند قبلاً به وضوح مشخص شده است - جداول برای قرار دادن داده‌های جدولی استفاده می‌شوند و لایه‌ها برای طرح‌بندی و طراحی استفاده می‌شوند. ایجاد جدول یک جدول از ردیف ها و ستون هایی از سلول ها تشکیل شده است که می تواند حاوی متن و عکس باشد. معمولاً از جداول برای سازماندهی و ارائه داده ها استفاده می شود، اما قابلیت های جداول به این محدود نمی شود. با کمک جداول می توان با چیدمان تکه های متن و تصاویر به روش دلخواه، چیدمان های صفحه را تایپ کرد. برای افزودن جدول به یک صفحه وب، از تگ استفاده کنید ... این عنصر به عنوان محفظه ای برای عناصری که محتویات جدول را تعریف می کنند عمل می کند. هر جدولی از ردیف ها و سلول هایی تشکیل شده است که با استفاده از برچسب ها تنظیم می شوند و یک خط جدید ایجاد می کند. بیشتر در تودرتو ... جدول باید حداقل دارای یک سلول باشد (مثال 12.1). به جای برچسب مجاز است از برچسب استفاده کنید ... متن در یک سلول تزئین شده با یک برچسب ، توسط مرورگر به صورت پررنگ نمایش داده می شود و در مرکز سلول تراز می شود. در غیر این صورت، تفاوت بین سلول ها از طریق برچسب ها ایجاد می شود و نه مثال 12.1. ایجاد جدول سلول 1 سلول 2 سلول 3 سلول 4 ترتیب سلول ها و شکل ظاهری آنها در شکل نشان داده شده است. 12.1. بدنه میز است. بدنه از ردیف و ستون تشکیل شده است. جدول خط به خط پر می شود. هر تگ ستون ها ایجاد می شود. می توان چندین ستون ایجاد کرد. در این مورد، باید تعداد ستون های هر سطر را پیگیری کنید. به عنوان مثال، اگر سطر اول 5 ستون داشته باشد، سطرهای بعدی نیز باید 5 ستون داشته باشند. در غیر این صورت، جدول شناور خواهد شد. ترکیب سلول ها امکان پذیر است. نحوه ساخت جدول در html بیایید یک مثال، کد html بیاوریم: جدول نمونه ستون 1 ستون 2 به سلول توجه کنید ... برای ترکیب افقی سلول ها از ویژگی خاص colspan استفاده می کنیم. مقدار عددی آن نشان دهنده تعداد ستون هایی است که باید ترکیب شوند. همچنین یک آنالوگ از این ویژگی وجود دارد: برچسب (هدر جدول)، که در آن شما همچنین باید colspan را بنویسید. نتیجه یکسان خواهد بود. اما td معمولی اغلب استفاده می شود. حال بیایید نگاهی دقیق تر به تمام ویژگی های تگ بیندازیم. . ویژگی ها و ویژگی ها را برچسب گذاری کنید به تگ افتتاحیه شما می توانید ویژگی های مختلف بنویسید. 1. Property align = "پارامتر" - تراز جدول را تنظیم می کند. می تواند مقادیر زیر را بگیرد: در مثال بالا، جدول را در مرکز align = "center" تراز کردیم. این ویژگی نه تنها برای یک جدول، بلکه برای سلول های جداول نیز قابل اعمال است. ... بنابراین، هم ترازی در سلول های مختلف متفاوت خواهد بود. برای مثال , , , یا cols - خط بین ستون ها نمایش داده می شود هیچ - همه مرزها پنهان هستند rows - مرز بین ردیف های جدول ایجاد شده از طریق تگ رسم می شود 12. Property width = "number" - عرض جدول را تعیین می کند: به پیکسل یا درصد. 13. Property class = "class_name" - می توانید نام کلاسی که جدول به آن تعلق دارد را مشخص کنید. 14. Property style = "styles" - سبک ها را می توان به صورت جداگانه برای هر جدول تنظیم کرد. اکنون زمان آن است که در جدول فرو رفته و به ویژگی های سلول های جدول نگاه کنید. این ویژگی ها باید در تگ افتتاحیه نوشته شوند. و گزینه های مشابه برای موجود است به صورت سلسله مراتبی برای همه اعمال خواهد شد یا رشته ها ... ... ... 2. Property background = "URL" - تصویر پس زمینه را تنظیم می کند. به جای URL، آدرس تصویر پس زمینه باید نوشته شود. مثال جدول نمونه ستون 1 ستون 2 در صفحه به موارد زیر تبدیل شد: در مثال بالا، تصویر پس زمینه ما در پوشه img (که در همان دایرکتوری صفحه html قرار دارد) قرار دارد و تصویر fon.gif نام دارد. توجه داشته باشید که در تگ ما style = "color: white;" را اضافه کرده ایم. ... از آنجایی که پس زمینه تقریبا سیاه است، برای اینکه متن با پس زمینه ادغام نشود، متن را سفید کردیم. 3. خاصیت bgcolor = "color" - رنگ پس زمینه جدول را تعیین می کند. به عنوان یک رنگ، می توانید هر یک از کل پالت را انتخاب کنید (به کدها و نام رنگ های html مراجعه کنید) 4. Property border = "number" - ضخامت حاشیه جدول را تعیین می کند. در مثال های قبلی border = "1" را مشخص کردیم، یعنی عرض حاشیه 1 پیکسل است. 5. ویژگی bordercolor = "color" - رنگ حاشیه را تنظیم می کند. اگر border = "0" باشد، هیچ حاشیه ای وجود نخواهد داشت و رنگ حاشیه معنی نخواهد داشت. 6. Property cellpadding = "number" - فرورفتگی از فریم به محتوای سلول در پیکسل. 7. Propertycellspacing = "number" - فاصله بین سلول ها بر حسب پیکسل. 8. Property cols = "number" - تعداد ستون ها. اگر آن را مشخص نکنید، مرورگر تعداد ستون ها را به تنهایی تعیین می کند. تنها تفاوت این است که مشخص کردن این پارامتر احتمالاً سرعت بارگذاری جدول را افزایش می دهد. 9. قاب ویژگی = "پارامتر" - نحوه نمایش حاشیه ها در اطراف جدول. می تواند مقادیر زیر را بگیرد: خالی - مرزها را ترسیم نکنید مرز - حاشیه دور میز بالا - حاشیه در بالای جدول زیر - حاشیه در پایین جدول hsides - فقط مرزهای افقی را اضافه کنید (بالا و پایین جدول) vsides - فقط مرزهای عمودی (چپ و راست جدول) را بکشید rhs - حاشیه فقط در سمت راست جدول lhs - حاشیه فقط در سمت چپ جدول 10. Property height = "number" - ارتفاع جدول را تعیین می کند: به پیکسل یا درصد. 11. Property rules = "پارامتر" - محل نمایش مرزهای بین سلول ها. می تواند مقادیر زیر را بگیرد: همه - یک خط در اطراف هر سلول در جدول کشیده شده است گروه ها - خط بین گروه هایی که توسط برچسب ها تشکیل شده اند نمایش داده می شود . صفات و خواص 1. Property align = "پارامتر" - تراز یک سلول جداگانه را در جدول تنظیم می کند. می تواند مقادیر زیر را بگیرد: تراز چپ - چپ تراز وسط - مرکز تراز راست - راست 2. Property background = "URL" - تصویر پس زمینه سلول را تنظیم می کند. به جای URL، آدرس تصویر پس زمینه باید نوشته شود. 3. خاصیت bgcolor = "color" - رنگ پس زمینه سلول را تنظیم می کند. 4. ویژگی bordercolor = "color" - رنگ حاشیه سلول را تعیین می کند. 5. خاصیت char = "حرف" - حرفی را که باید از روی آن تراز انجام شود را تنظیم می کند. مقدار مشخصه align باید روی char تنظیم شود. 6. Property colspan = "number" - تعداد سلول های افقی را برای ترکیب تنظیم می کند. 7. Property height = "number" - ارتفاع جدول را تعیین می کند: به پیکسل یا درصد. 8. Property width = "number" - پهنای جدول را تعیین می کند: به پیکسل یا درصد. 9. Property rowspan = "number" - تعداد سلول های عمودی ادغام شده را تنظیم می کند. 10. Property valign = "پارامتر" - تراز عمودی محتویات سلول. بالا - محتویات سلول را با بالای خط تراز می کند تراز وسط - وسط پایین - به پایین تراز کنید خط مبنا - هم ترازی خط مبنا یادداشت 1 برای برچسب زدن ... پارامترهای یک تگ درون آن چگونه از چسبیدن سلول های جدول به یکدیگر جلوگیری کنیم؟ در مورد استفاده از حاشیه (حاشیه سلول ها) و لایه صفر بین سلول ها، همچنان به هم چسبیده اند و یک حاشیه دوتایی دریافت می کنید. برای جلوگیری از این امر، باید جدول border-collapse: collapse را در stylesheet ثبت کنید: ... خواننده عزیز، اکنون چیزهای بیشتری در مورد تگ جدول html یاد گرفته اید. اکنون به شما توصیه می کنم که به درس بعدی بروید. این فصل به جزئیات در مورد اصول استفاده از جداول در نشانه گذاری HTML می پردازد. این یک سازمان جدولی از متن، و یک شبکه مختصات جدولی، و یک نمودار سازماندهی شده در جداول است. امکانات شرح جدول HTML با توسعه WWW، مشخص شد که ابزارهای تعبیه شده در NTML برای نمایش با کیفیت بالا انواع اسناد کافی نیست. نقطه ضعف НТМL نبود امکانات نمایش جدول در ترکیب آن بود. برای این منظور، متن از پیش فرمت شده (برچسب ) که در آن جدول با نمادهای ASCII مشخص شده است. اما این شکل از ارائه جداول کیفیت بالایی نداشت و از سبک کلی سند خارج شد. با معرفی جداول در HTML، وب مسترها تنها ابزاری برای قرار دادن متن و اعداد نیستند، بلکه یک ابزار طراحی قدرتمند برای قرار دادن گرافیک و متن در جای مناسب بر روی صفحه نمایش هستند. ایجاد جداول در HTML تگ برای توصیف جداول استفاده می شود<ТАВLЕ>... برچسب بزنید<ТАВLЕ>مانند بسیاری دیگر، خط قبل و بعد از جدول را به طور خودکار ترجمه می کند. ایجاد ردیف - برچسب جدول<ТR> برچسب بزنید<ТR>(Table Row, table row) یک ردیف جدول ایجاد می کند. تمام متن ها، سایر تگ ها و ویژگی هایی که باید در یک خط قرار گیرند باید بین تگ های lt؛ TR> قرار گیرند.. تعریف سلول های جدول - برچسب<ТD> سلول های داده معمولاً در داخل یک ردیف جدول قرار می گیرند. هر سلول حاوی متن یا تصویر باید با برچسب احاطه شود<ТD>... تعداد تگ ها<ТD>در هر خط تعداد سلول ها را مشخص می کند جدول اگر یک جدول دارای دو تگ TR باشد، پس دارای دو ردیف است. اگر سه تگ TD در یک خط وجود داشته باشد، سپس در آن سه ستون سربرگ ستون های جدول - برچسب<ТН> سرصفحه ها برای ستون ها و ردیف های جدول با استفاده از تگ هدر تنظیم می شوند<ТН>(Table Neader، عنوان جدول). این برچسب ها مانند<ТD>... تفاوت این است که متن بین برچسب ها<ТН>، به طور خودکار به صورت پررنگ نوشته می شود و به طور پیش فرض در وسط سلول قرار دارد. می توانید وسط را لغو کنید و متن را در سمت چپ یا راست تراز کنید. اگر استفاده می کنید<ТD>با برچسب<В>و صفت<АLIGN=center>، متن نیز مانند یک عنوان خواهد بود. با این حال، به خاطر داشته باشید که همه مرورگرها از متن پررنگ در جداول پشتیبانی نمی کنند، بنابراین بهتر است عناوین جدول را با استفاده از<ТН>. عنوان به طور پیش فرض در مرکز قرار دارد هدر می تواند ستون ها را به هم متصل کند هدر را می توان در مقابل ستون ها قرار داد متن یا داده متن یا داده هدر می تواند خطوط را به هم متصل کند متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده استفاده از هدر جدول - برچسب<САРТIОN> برچسب بزنید به شما اجازه می دهد تا سرفصل های جدول ایجاد کنید. به‌طور پیش‌فرض، عناوین در مرکز قرار دارند و در بالا (<САРТION АLIGN=top>، یا زیر میز (<САРТION ALIGN=bottom>). عنوان می تواند هر متن و تصویری باشد. متن به خطوطی تقسیم می شود که با عرض جدول مطابقت دارند. گاهی اوقات تگ<САРТION>برای شرح زیر عکس استفاده می شود برای این کار کافی است جدول را بدون حاشیه توصیف کنید. بالا رفتن از جدول متن یا داده متن یا داده متن یا داده متن یا داده عنوان زیر جدول متن یا داده متن یا داده متن یا داده ویژگی NOWRAP به طور معمول، هر متنی که در یک خط از سلول جدول قرار نمی گیرد به خط بعدی منتقل می شود. با این حال، هنگام استفاده از ویژگی NOWRAP با برچسب ها<ТН>یا<ТD>طول سلول بزرگ می شود به طوری که متن محصور شده در یک خط قرار می گیرد. ویژگی COLSPAN برچسب ها<ТD>و<ТН>با استفاده از ویژگی COLSPAN (وسعت ستون) اصلاح شده است. اگر می‌خواهید یک سلول پهن‌تر از بالا یا پایین ایجاد کنید، می‌توانید از ویژگی COLSPAN برای کشش آن بر روی هر تعداد سلول معمولی استفاده کنید. اگر می خواهید یک سلول پهن تر از بالا یا پایین بسازید، می توانید از ویژگی SLSPAN = 2 استفاده کنید، تا آن را روی هر تعداد سلول معمولی بکشید. ویژگی ROWSPAN ویژگی ROWSPAN در برچسب ها استفاده می شود<ТD>و<ТН>، شبیه ویژگی COLSPAN = است، با این تفاوت که تعداد سطرهایی را که در سلول قرار دارند را مشخص می کند. اگر عددی بزرگتر از یک را در ویژگی ROWSPAN = s مشخص کرده اید، تعداد ردیف های مربوطه باید در زیر سلول کشیده شده باشد. نمی توان آن را در پایین جدول قرار داد. ویژگی WIDTH ویژگی WIDTH به دو صورت استفاده می شود. می توانید آن را در یک برچسب قرار دهید<ТАВLЕ>برای دادن عرض کل جدول، یا می تواند در برچسب ها استفاده شود<ТD>یا<ТН>برای تنظیم عرض یک سلول یا گروهی از سلول ها. عرض را می توان بر حسب پیکسل یا درصد مشخص کرد. به عنوان مثال، اگر در تگ تنظیم کنید<ТАВLЕ>WIDTH = 250، جدولی با عرض 250 پیکسل بدون توجه به اندازه صفحه روی مانیتور شما دریافت می کنید. هنگام تنظیم WIDTH = 50٪ در برچسب<ТАВLЕ>جدول برای هر اندازه تصویر روی صفحه، نیمی از عرض صفحه را اشغال می کند. بنابراین هنگام تعیین عرض جدول به صورت درصد، به خاطر داشته باشید که اگر کاربر دارای یک نمای باریک باشد، ممکن است صفحه شما کمی عجیب به نظر برسد. اگر از پیکسل‌ها استفاده می‌کنید و جدول عریض‌تر از درگاه نمایش است، یک نوار اسکرول در پایین ظاهر می‌شود تا در صفحه به چپ و راست حرکت کنید. بسته به وظیفه ای که در دست دارید، هر دو روش تنظیم عرض جدول می تواند مفید باشد. متن یا داده - 100٪ عرض یا متن یا داده - 50٪ عرض یا متن یا داده - 200 پیکسل عرض یا متن یا داده - 100 پیکسل عرض استفاده از سلول های خالی اگر سلولی فاقد داده باشد، هیچ مرزی نخواهد داشت. اگر می خواهید سلولی حاشیه داشته باشد اما محتوا نداشته باشد، باید چیزی را در آن قرار دهید که هنگام مشاهده قابل مشاهده نباشد. می توانید از یک خط خالی استفاده کنید<ВR>... حتی می‌توانید ستون‌های خالی را با مشخص کردن عرض آن‌ها بر حسب پیکسل یا واحدهای نسبی و وارد نکردن هیچ داده‌ای در سلول‌های حاصل، تعریف کنید. این ابزار می تواند هنگام قرار دادن متن و گرافیک در یک صفحه مفید باشد. ویژگی CELLPADDING این ویژگی عرض فضای سفید بین محتویات سلول و مرزهای آن را مشخص می کند، یعنی حاشیه های داخل سلول را تعیین می کند. متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده ویژگی های ALIGN و VALIGN برچسب ها<ТR>, <ТD>و<ТН>را می توان با استفاده از ویژگی های ALIGN و VALIGN تغییر داد. مشخصه ALIGN تراز افقی متن و گرافیک را تعیین می کند، یعنی به سمت چپ یا راست یا به مرکز. تراز افقی را می توان به چند روش مشخص کرد: ALIGN = خونریزیمحتویات سلول را روی لبه چپ فشار می دهد. ALIGN = سمت چپمحتویات سلول را در سمت چپ با padding مشخص شده توسط ویژگی CELLPADDING تراز می کند. ALIGN = مرکزمحتویات سلول را متمرکز می کند. ALIGN = راستمحتویات سلول را با بالشتک مشخص شده توسط ویژگی CELLPADDING به سمت راست تراز می کند. متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده ویژگی VALIGN متن و گرافیک را در یک سلول به صورت عمودی تراز می کند. تراز عمودی را می توان به چند روش مشخص کرد: VALIGN = بالامحتویات سلول را با حاشیه بالایی آن تراز می کند. VALIGN = وسطمحتویات سلول را به صورت عمودی متمرکز می کند. VALIGN = پایینمحتویات یک سلول را با مرز پایین آن تراز می کند. ویژگی VALIGN متن و گرافیک را در یک سلول به صورت عمودی تراز می کند. بالا، وسط، پایین VALIGN = top محتویات سلول را با حاشیه بالایی آن تراز می کند. بالا، بالا، بالا. VALIGN = Middle محتوای سلول را به صورت عمودی در مرکز قرار می دهد. وسط، وسط، وسط VALIGN = bottom محتویات سلول را با حاشیه پایین تراز می کند. پایین، پایین، پایین ویژگی BORDER در تگ<ТАВLЕ>اغلب تعیین می کند که فریم ها چگونه به نظر می رسند، یعنی خطوطی که سلول های جدول و خود جدول را احاطه کرده اند. اگر حاشیه ای را مشخص نکنید، یک جدول بدون خط دریافت خواهید کرد، اما فضایی برای آنها وجود خواهد داشت. همین نتیجه را می توان با تنظیم به دست آورد<ТАВLЕ ВОRDER=0>... گاهی اوقات می خواهید حاشیه را ضخیم تر کنید تا بهتر دیده شود. می توانید برای جلب توجه به یک عکس یا متن، حاشیه های فوق العاده پررنگ تنظیم کنید. هنگام ایجاد جداول تو در تو، باید حاشیه هایی با ضخامت های مختلف برای جداول مختلف ایجاد کنید تا تشخیص بین آنها آسان تر شود. ویژگی CELLSPACING ویژگی CELLSPACING عرض فضاهای بین سلول ها را بر حسب پیکسل مشخص می کند. اگر این ویژگی مشخص نشده باشد، پیش فرض دو پیکسل است. با ویژگی CELLSPACING = می توانید متن و گرافیک را در هر کجا که می خواهید قرار دهید. اگر می خواهید یک فضای خالی بگذارید، می توانید یک فاصله در سلول وارد کنید. متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده ویژگی BGCOLOR این ویژگی به شما امکان می دهد رنگ پس زمینه را تنظیم کنید. بسته به اینکه با کدام برچسب (TABLE، TR، TD) اعمال می شود، رنگ پس زمینه را می توان برای کل جدول، برای یک ردیف یا برای یک سلول تنظیم کرد. مقدار این ویژگی یک کد RGB یا یک نام رنگ استاندارد است. متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده متن یا داده ویژگی پس زمینه این ویژگی تصویر پس زمینه جداول را تنظیم می کند. روی تگ های TABLE و TD اعمال شود. مقدار آن URL فایل تصویر پس زمینه است. استفاده از این ویژگی در زیر مورد بحث قرار گرفته است. استفاده از جداول در طراحی صفحه خوبی جداول این است که در صورت تمایل می توانید مرزهای آنها را نامرئی کنید. این امکان استفاده از تگ را فراهم می کند<ТАВLЕ>متن و گرافیک را به زیبایی در صفحه قرار دهید. در حالی که برچسب<ТАВLЕ>تنها ابزار قالب‌بندی قدرتمند در HTML باقی می‌ماند. طراحان صفحات وب در حال حاضر تقریباً از همان آزادی استفاده از "فضای سفید" را دارند که خالقان صفحات چاپ شده هستند. جداول بهترین راه برای دور شدن از قرار دادن سلسله مراتبی متن در صفحات وب هستند. اگر مرورگر از جداول پشتیبانی کند، معمولاً جالب ترین افکت های تولید شده با آنها را به درستی نمایش می دهد. دانشگاه آموزشی دولتی اورال خوش آمدی! دوره آموزشی "مبانی مستر وب" ساخت جداول رنگارنگ برخی از مرورگرها اجازه نمایش رنگ ها را می دهند. روش های مختلفی برای رنگ آمیزی جدول وجود دارد، آنها بیشتر به مرورگر مورد استفاده بستگی دارند. حاشیه های رنگی در Netscape Navigator. شما نه تنها می توانید دور میز را با یک قاب زیبا احاطه کنید، بلکه می توانید رنگی متفاوت از رنگ متن و پس زمینه برای آن تعیین کنید. یک GIF خاکستری ساده (یا هر گیفی که می خواهید به عنوان پس زمینه داشته باشید) ایجاد کنید و آن را در تگ تعریف کنید.<ВODY>به عنوان پس زمینه صفحه سپس رنگ پس زمینه صفحه را تنظیم کنید. در نتیجه تگ شما<ВОDY>چیزی شبیه به این خواهد بود: شما یک پس زمینه دوتایی ایجاد کرده اید - GIF و یک رنگ مشخص. در نتیجه، رنگ پس‌زمینه در تمام حاشیه‌های جداول و خطوط افقی قابل مشاهده خواهد بود (<НR>). صرف نظر از خاکستری بودن یا نبودن GIF پس‌زمینه شما، خطوط رنگی و حاشیه‌های جداول به‌طور قابل توجهی برجسته می‌شوند. اگر GIF پس‌زمینه خیلی پیچیده نباشد، زمان بارگذاری صفحه فقط اندکی افزایش می‌یابد. مقالات مرتبط برتر حرکت های مختلف ماوس به صورت عمودی و افقی نحوه فشرده سازی بافت ها در fallout 4 تنها برای درک سطح مورد نیاز باقی مانده است دسته بندی ها: برنامه ها ایمنی ویندوز 10 اهن ویندوز 8 در تماس با خطاها © 2021 bumotors.ru. نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی پرتال اطلاعاتی