یک سلول جدول در html با تگ ها مشخص می شود.

05.04.2019 مشاوره

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

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

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

برای توضیحات جداولبرچسب استفاده می شود<ТАВLЕ>. برچسب بزنید<ТАВLЕ>مانند بسیاری دیگر، خط قبل و بعد از جدول را به طور خودکار ترجمه می کند.

ایجاد ردیف - برچسب جدول<ТR>

برچسب بزنید<ТR>(Table Row, table row) یک ردیف جدول ایجاد می کند. تمام متن ها، سایر برچسب ها و ویژگی هایی که باید در یک خط قرار گیرند باید بین تگ ها قرار گیرند<ТR> .

تعریف سلول های جدول - برچسب<ТD>

سلول های دارای داده معمولاً در یک ردیف جدول قرار می گیرند. هر سلول حاوی متن یا تصویر باید با برچسب احاطه شود<ТD>. تعداد تگ ها<ТD>در یک ردیف تعداد سلول ها را تعریف می کند (باز)

جدول

اگر یک جدول دارای دو تگ TR باشد، پس دارای دو ردیف است.
اگر سه نفر در خط هستند تگ TD,	سپس در آن	سه ستون

برنج. 4.1.

عناوین ستون های جدول - برچسب<ТН>

سرفصل های ستون ها و ردیف های جدول با استفاده از تگ هدر تنظیم می شوند<ТН>(TableHeader، عنوان جدول). این برچسب ها مشابه هستند<ТD>. تفاوت این است که متن بین تگ ها محصور شده است<ТН>، به طور خودکار به صورت پررنگ نوشته می شود و به طور پیش فرض در وسط سلول قرار می گیرد. می توانید متن را از مرکز خارج کنید و متن را در سمت چپ یا راست تراز کنید. اگر استفاده می کنید<ТD>با برچسب<В>و صفت<АLIGN=center>، متن نیز شبیه یک عنوان خواهد بود. با این حال، توجه داشته باشید که همه مرورگرها از جداول پشتیبانی نمی کنند فونت پررنگ، بنابراین بهتر است هدر جدول را با استفاده از آن تنظیم کنید<ТН> .

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

استفاده از هدر جدول - برچسب<САРТIОN>

برچسب بزنید به شما اجازه می دهد تا سرفصل های جدول ایجاد کنید. به طور پیش فرض، عنوان ها در مرکز قرار می گیرند و در بالا (<САРТION АLIGN=top>، یا زیر میز (<САРТION ALIGN=bottom>). عنوان می تواند شامل هر متن و تصویری باشد. متن به خطوط مربوط به عرض جدول تقسیم می شود. گاهی تگ کنید<САРТION>برای امضای یک عکس استفاده می شود. برای این کار کافی است یک جدول بدون حاشیه را توصیف کنید.

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

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

ویژگی NOWRAP

به طور معمول، هر متنی که در یک خط از سلول جدول قرار نمی گیرد به آن می رود خط بعدی. با این حال، هنگام استفاده از ویژگی NOWRAP با برچسب ها<ТН>یا<ТD>طول سلول به گونه ای گسترش می یابد که متن موجود در آن در یک خط قرار می گیرد.

ویژگی COLSPAN

برچسب ها<ТD>و<ТН>با استفاده از ویژگی COLSPAN (طول ستون، اتصال ستون) اصلاح شده است. اگر می‌خواهید یک سلول پهن‌تر از بالا یا پایین ایجاد کنید، می‌توانید از ویژگی COLSPAN برای کشش آن بر روی هر تعداد سلول معمولی استفاده کنید.

اگر می خواهید هر سلولی را پهن تر از بالا یا پایین بسازید،	می توانید از ویژگی COLSPAN=2 استفاده کنید،
تا آن را روی هر تعداد سلول معمولی بکشید.

ویژگی ROWSPAN

ویژگی ROWSPAN در برچسب ها استفاده می شود<ТD>و<ТН>، مشابه ویژگی COLSPAN= است، فقط تعداد خطوطی را که سلول روی آنها کشیده شده است را مشخص می کند. اگر عددی بزرگتر از یک را در ویژگی ROWSPAN=s مشخص کرده‌اید، تعداد ردیف‌های مربوطه باید در سلول در حال کشیده شدن باشد. نمی توان آن را در پایین جدول قرار داد.

ویژگی WIDTH

ویژگی WIDTH در دو مورد استفاده می شود. می توانید آن را در یک برچسب قرار دهید<ТАВLЕ>برای تنظیم عرض کل جدول، یا می تواند در برچسب ها استفاده شود<ТD>یا<ТН>برای تنظیم عرض یک سلول یا گروهی از سلول ها. عرض را می توان بر حسب پیکسل یا درصد مشخص کرد. به عنوان مثال، اگر در تگ تنظیم کنید<ТАВLЕ WIDTH=250>، جدولی با عرض 250 پیکسل بدون توجه به اندازه صفحه در مانیتور دریافت خواهید کرد. هنگام تنظیم WIDТН=50% در تگ<ТАВLЕ>جدول نیمی از عرض صفحه را در هر اندازه تصویر روی صفحه اشغال می کند. بنابراین، هنگام تعیین عرض جدول به صورت درصد، به خاطر داشته باشید که اگر کاربر دارای نمای باریکی باشد، ممکن است صفحه شما کمی عجیب به نظر برسد. اگر از پیکسل‌ها استفاده می‌کنید و جدول عریض‌تر از ناحیه مشاهده است، یک نوار پیمایش در پایین صفحه ظاهر می‌شود تا در سراسر صفحه به چپ و راست حرکت کنید. بسته به وظایف در دست، هر یک از روش های تنظیم عرض جدول ممکن است مفید باشد.

متن یا داده - عرض 100٪

یا

متن یا داده - عرض 50٪

یا

متن یا داده - 200 پیکسل عرض

یا

متن یا داده - 100 پیکسل عرض

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

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

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

، برای ایجاد رشته ها به برچسب ها نیاز است و، که بین تگ های TABLE نوشته می شوند، اما ستون ها توسط تگ ها ایجاد می شوند وو همانطور که قبلا متوجه شدید، آنها بین تگ های TR قرار می گیرند.

بیایید ایجاد کنیم یک میز سادهکه از 3 ستون تشکیل شده است. کد HTML جدول:

ستون 1

ستون 2

ستون 3

در صفحه مرورگر، جدول به صورت زیر خواهد بود:

به طور پیش فرض، مرورگر جدولی را با حاشیه نمایش می دهد. برای مخفی کردن حاشیه جدول، به ویژگی تگ TABLE border نیاز دارید. نمونه ای از جدول بدون حاشیه:

ستون 1

ستون 2

ستون 3

در صفحه جدول خود را بدون قاب خواهیم دید:

ویژگی border فقط اندازه حاشیه بیرونی جدول ما را تغییر می دهد. همانطور که می دانید مقدار 0 آن را نامرئی می کند و مقدار 1 تا 10 ضخامت آن را تعیین می کند. بیایید مثالی از یک جدول با قاب 6 بیاوریم:

ستون 1

ستون 2

ستون 3

در خروجی صفحه جدول زیر را دریافت می کنیم:

با استفاده از ویژگی bordercolor می توانید رنگ حاشیه خود را در جدول تنظیم کنید. بر مثال HTMLمن یک میز با قاب سبز و ضخامت 4 را به شما نشان می دهم:

ستون 1

ستون 2

ستون 3

ما این را دریافت می کنیم:

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

ستون 1

ستون 2

ستون 3

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

برای تغییر فاصله بین متن و حاشیه سلول، از ویژگی cellpadding table استفاده کنید. کد HTML برای صفت cellpadding با استفاده از یک مثال:

جدول به دست آمده در مرورگر:

برای ترکیب سلول ها در جداول، از ویژگی های تگ TD استفاده می شود:

colspan - ترکیب سلول ها به صورت افقی.
پهنای ردیف - ترکیب سلول ها به صورت عمودی.

تصور آن بسیار دشوار است، بنابراین من یک مثال ساده کد HTML را ارائه می کنم:

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

در مرورگر جدول زیر را دریافت می کنیم:

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

ستون 1

ستون 2

ستون 3

در مرورگر:

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

برای تراز کردن محتویات سلول ها به صورت عمودی، به یک ویژگی valign برای سلول نیاز داریم. معنی آن را می گویم:

خط پایه - در امتداد خط پایه؛
پایین - در امتداد لبه پایین؛
وسط - در وسط (مقدار پیش فرض)؛
بالا - در امتداد لبه بالایی.

سعی کنید خودتان یک نمونه کد HTML بسازید، فکر می کنم این کار در این مرحله از درس مفید است :)

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

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

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

تاریخ انتشار: ۲۵ اردیبهشت ۱۳۹۱برای ایجاد یک جدول خدمت می کند.

ویژگی های:

عرض - عرض جدول بر حسب پیکسل یا % نسبت به عرض پنجره مرورگر.

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

align - تراز جدول.

سمت چپ - جدول را به سمت چپ تراز کنید.

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

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

حاشیه - ضخامت حاشیه جدول بر حسب پیکسل.

فاصله سلولی - فاصله بین سلول های مجاور بر حسب پیکسل (پیش فرض = 2).

cellpadding - فاصله بین محتویات سلول و مرز آن بر حسب پیکسل (پیش‌فرض = 1).

bgcolor - رنگ پس زمینهجداول

زمینه - تصویر پس زمینهبرای میز

bordercolor - رنگ تمام خطوط حاشیه جدول.

ظرف برای ایجاد یک ردیف جدول خدمت می کند.

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

ظرف برای ایجاد یک سلول جدول خدمت می کند.

ویژگی های

عرض - عرض سلول به پیکسل یا % نسبت به عرض پنجره مرورگر (برای صدق نمی کند).

ارتفاع - ارتفاع سلول به پیکسل یا درصد نسبت به عرض پنجره مرورگر (برای صدق نمی کند).

align - هم ترازی در سلول.

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

راست - سلول را به سمت راست تراز کنید.

هم ترازی مرکز - مرکز در سلول.

والین - چیدمان عمودیمحتویات سلول

بالا - با لبه بالای سلول تراز کنید.

پایین - تراز به لبه پایین سلول.

وسط - تراز به وسط سلول.

bgcolor - رنگ پس زمینه سلول.

پس زمینه - تصویر پس زمینه برای سلول.

bordercolor - رنگ تمام خطوط مرز سلول.

colspan - تعداد سلول هایی که باید توسط ستون ها ادغام شوند (برای صدق نمی کند).

rowspan - تعداد سلول هایی که باید با ردیف ادغام شوند (برای صدق نمی کند).

این کد:

سرفصل
زاگ 1	زاگ 2	زاگ 3
1	2	3
4	5	6

نتیجه زیر را خواهد داد.

وظیفه

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

راه حل

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

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

. جدول باید حداقل دارای یک سلول باشد (مثال 1). به جای برچسب مجاز است

از برچسب استفاده کنید

. متن در یک سلول با یک برچسب استایل داده شده است

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

خیر

مثال 1: ایجاد جدول

HTML5 IE Cr Op Sa Fx

برچسب جدول

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

ترتیب سلول ها و شکل ظاهری آنها در شکل نشان داده شده است. 1.

برنج. 1. نتیجه ایجاد جدول با چهار خانه

ویژگی تگ مرزی

فقط اضافه کردن با آن جایز است مقدار خالی (

) یا برابر با 1. همه مقادیر دیگر اعتبار سنجی نمی شوند.

برای کنترل حاشیه های داخل سلول ها از style استفاده می شود خاصیت padding، که به انتخابگر td اضافه می شود. فاصله بین سلول‌ها توسط ویژگی فاصله‌گذاری مرزی (مثال 2) که به انتخابگر جدول اضافه شده است، تغییر می‌کند. مرورگر اینترنت اکسپلورر فقط از نسخه 8.0 آن را درک می‌کند.

مثال 2: حاشیه های داخل سلول ها

HTML5 CSS 2.1 IE Cr Op Sa Fx

برچسب جدول

سرفصل 1	سرفصل 2
سلول 3	سلول 4

جدولی با فیلدها و فاصله بین سلول ها در شکل نشان داده شده است. 2. نتیجه مشابهی را می توان با استفاده از یک قاب به دست آورد سفیداطراف سلول ها

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

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

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

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

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

نام جدول
استوبتس 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

نتیجه

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

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