گرفتن بیشتر از جداول HTML با یادگیری ویژگی های جدول
ویژگی های جدول جدول HTML به شما کنترل بیشتری بر جداول HTML می دهد. بسیاری از ویژگی های موجود در جداول برای آنها جالب تر و تغییر ظاهر صفحه شما هستند.
عناصر HTML ELEMENT TABLE
در HTML5 عنصر با استفاده از ویژگی های جهانی و یک ویژگی دیگر:. و آن را تغییر داده است فقط مقدار 1 یا خالی (یعنی border = ""). اگر می خواهید عرض عرض را تغییر دهید، باید از ویژگی CSS border-width استفاده کنید.
برای اطلاعات در مورد ویژگی های جدول معتبر HTML5، زیر را ببینید.
همچنین ویژگی های متعددی وجود دارد که بخشی از مشخصات HTML 4.01 است که در HTML5 منسوخ شده است:
- -استفاده از کدگذاری CSS بر روی عناصر TD و TH جدول.
- استفاده از مرز فاصله CSS در جدول.
- استفاده از سبک CSS مرز رنگ: سیاه و سفید؛ و مرز سبک بر روی میز.
- استفاده از سبک CSS مرز رنگ: سیاه و سفید؛ و مرز سبک بر روی عناصر مناسب جدول.
- - در عوض، شما باید ساختار جدول را در یک CAPTION توصیف کنید یا کل جدول را در یک تصویر قرار دهید و آن را در FIGCAPTION توصیف کنید. به طور خلاصه، شما می توانید ساختار جدول را ساده تر کنید تا بدون توضیح لازم باشد.
- استفاده از خصوصیت عرض CSS.
و یک ویژگی که در HTML 4.01 منسوخ شده است و همچنین در HTML5 منسوخ شده است.
اطلاعات بیشتر در مورد HTML 4.01 TABLE Attributes.
- align-با استفاده از خصوصیت حاشیه CSS به جای آن.
همچنین ویژگی های متعددی وجود دارد که جزء مشخصات هر HTML نیستند.
از این ویژگی ها استفاده کنید اگر می دانید مرورگرهایی که پشتیبانی می کنید می توانند آنها را اداره کنند و به HTML معتبر توجه نکنید.
- -با استفاده از رنگ پس زمینه CSS به جای آن.
- bordercolor-استفاده از مرز رنگ CSS به جای آن.
- bordercolorlight-به جای استفاده از border-color property CSS.
- bordercolordark - به جای استفاده از border-color property CSS.
- cols-جایگزینی برای این ویژگی وجود ندارد.
- height-به جای استفاده از اموال CSS.
- -جنبه مالکیت CSS را عوض کنید.
- -جنبه مالکیت CSS را عوض کنید.
- -با استفاده از CSS املا سفید-فضا.
- -استفاده از CSS property-align به جای آن.
اطلاعات بیشتر در خصوص ویژگیهای TABLE SPECIFIC Browser بیشتر بدانید.
HTML5 TABLE عناصر عنصر
همانگونه که در بالا ذکر شد، فقط یک ویژگی وجود دارد که فراتر از ویژگیهای جهانی است که در عنصر HTML5 TABLE معتبر است: border.
ویژگی مرز برای تعریف یک مرز در اطراف کل جدول و تمام سلولهای داخل آن استفاده می شود. سوال دیگری در مورد این که آیا در مشخصات HTML5 وجود خواهد داشت یا خیر، مشکلی وجود داشت، اما باقی ماند زیرا اطلاعات مربوط به ساختار جدول، فراتر از مفاهیم ساده است.
برای اضافه کردن ویژگی مرز، اگر مقدار یک مرزی وجود داشته باشد و مقدار آن را خالی (یا ترک ویژگی) را تنظیم کنید، اگر آن وجود نداشته باشد، مقدار آن را 1 تنظیم کنید. اکثر مرورگرها 0 برای هیچ مرز و هر عدد صحیح دیگر (2، 3، 30، 500 و غیره) را برای اعلام عرض عرض در پیکسل ها پشتیبانی می کنند، اما این در HTML5 منسوخ شده است. در عوض، شما باید از ویژگی های سبک مرز CSS برای تعریف عرض عرض و سایر سبک ها استفاده کنید.
برای ایجاد یک جدول با یک مرز، بنویسید:
border = "1" >
این یک جدول با یک مرز است
HTML 4.01 ویژگی هایی هستند که در HTML5 منسوخ شده اند. اگر شما در حال تهیه اسناد HTML 4.01 هستید، می توانید آنها را بیاموزید، در غیر اینصورت می توانید آنها را نادیده بگیرید. اکثر این ویژگی ها دارای جایگزینی هستند که در بالا توضیح داده شده اند.
ما ویژگی های عنصر معتبر در HTML5 (و HTML 4.01) را توصیف می کنیم. این توصیف ویژگی های TABLE که در HTML 4.01 معتبر هستند، اما در HTML5 منسوخ شده اند. اگر شما هنوز اسناد HTML 4.01 را بنویسید، می توانید از این ویژگی ها استفاده کنید، اما اکثر آنها جایگزین هایی هستند که باعث می شود صفحات شما در آینده برای HTML5 تغییراتی ایجاد شود.
Valid HTML 4.01 Attributes
ویژگی که ما در بالا توضیح دادیم.
تنها تفاوت در HTML 4.01 از HTML5 این است که شما می توانید هر عدد صحیح کامل (0، 1، 2، 15، 20، 200، و غیره) را برای تعریف عرض مرز در پیکسل مشخص کنید.
برای ساخت یک جدول با یک مرز 5 پیکا، بنویسید:
border = "5" >
این جدول دارای یک حاشیه 5 پیکسل است.
یک مثال از دو جدول با مرزها را ببینید.
این ویژگی مقدار فضای بین مرزهای سلولی و محتویات سلول را تعیین می کند. پیش فرض دو پیکسل است. اگر میخواهید فضای بین محتویات و مرزها فاصله نداشته باشد، سلول پدری را به 0 تنظیم کنید.
برای تنظیم پشته سلولی به 20، نوشتن:
cellpadding = "20" >
این جدول دارای سلول پلاگین 20 است.
مرزهای سلولی با 20 پیکسل جدا می شوند.
یک نمونه از یک جدول با سلول پدری را مشاهده کنید
این ویژگی مقدار فضای بین سلول های جدول و محتوای سلولی را تعیین می کند. مانند cellpadding، به طور پیش فرض دو پیکسل تنظیم شده است، بنابراین اگر شما هیچ فاصله سلولی را نمی خواهید، باید آن را به 0 تنظیم کنید.
برای اضافه کردن فاصله سلولی به جدول، نوشتن:
cellpacing = "20" >
این جدول یک cellpacing از 20 دارد.
سلول ها با 20 پیکسل جدا می شوند.
جدولی با سلول های پیکسلی مشاهده کنید
این ویژگی مشخص می کند که کدام بخش از مرز اطراف خارج از یک جدول قابل مشاهده است. شما می توانید میز خود را در چهار طرف، هر یک از طرف، بالا و پایین، چپ و راست، و یا هیچ کدام.
در اینجا HTML برای یک جدول با تنها حاشیه سمت چپ است:
frame = "lhs" >
این جدول
باید داشته باشد
تنها
سمت چپ قاب.
مثال دیگری با قاب پایین:
frame = "below" >
این جدول دارای یک قاب در پایین است.
چند جدول با فریم را بررسی کنید
این خصیصه شبیه ویژگی قاب است، و تنها بر مرزهای اطراف سلول های جدول تاثیر می گذارد. شما می توانید قوانین مربوط به تمام سلول ها، بین ستون ها، بین گروه هایی مانند TBODY و TFOOT یا هیچ کدام را تنظیم کنید.
برای ساخت یک جدول با خطوط فقط بین سطرها، نوشتن:
rules = "rows" >
این جدول 4x4 دارای است
ردیف های ستون نیست
با مشخص شده است
قوانین صفت
و دیگری با خطوط بین ستون:
rules = "cols" >
این است
یک جدول
جایی که
ستون
هستند
برجسته
در اینجا یک مثال از جدول aa با قوانین است
این مشخصه اطلاعاتی در مورد جدول برای خوانندگان صفحه نمایش و سایر عوامل کاربر فراهم می کند که ممکن است دچار مشکل در خواندن جداول باشند. برای استفاده از ویژگی خلاصه، یک توضیح مختصر از جدول بنویسید و آن را به عنوان مقدار مشخصه قرار دهید. خلاصه در بیشتر وب سایت های استاندارد وب نمایش داده نمی شود.
در اینجا نحوه نوشتن یک جدول ساده با یک خلاصه است:
summary = "این یک جدول نمونه است که حاوی اطلاعات پرکننده است. هدف این جدول نشان دادن خلاصه است." >
ستون 1 ردیف 1
ستون 2 ردیف 1
ستون 1 ردیف 2
ستون 2 ردیف 2
یک جدول با یک خلاصه را مشاهده کنید
این ویژگی عرض عرض را در هر پیکسل و یا به عنوان یک درصد از عنصر ظرف تعریف می کند. اگر عرض تنظیم نشده باشد، جدول تنها به همان اندازه فضای لازم را برای نمایش محتویات با عرض حداکثر عرض همان عنصر والدین خواهد داشت.
برای ساخت یک جدول با عرض خاص در پیکسل، نوشتن:
width = "300" >
این جدول 80٪ عرض کانتینر آن است.
و برای ساخت یک جدول با عرض که یک درصد از عنصر والدین است، بنویسید:
width = "80٪" >
این جدول 80٪ عرض کانتینر آن است.
یک نمونه از یک جدول با عرض را ببینید
مشخصه TABLE HTML 4.01 غیر قابل تنظیم
یک ویژگی از عنصر TABLE وجود دارد که در HTML 4.01 منسوخ شده و در HTML5 منسوخ شده است. این ویژگی به شما امکان می دهد که کجا جدول را در صفحه قرار دهید نسبت به متن که در کنار آن قرار دارد. این ویژگی در HTML 4.01 منسوخ شده است و شما باید از آن استفاده نکنید. در عوض، باید از ویژگی CSS یا margin-left: auto استفاده کنید. و حاشیه سمت راست: خودکار؛ سبک ها اموال شناور به شما می دهد نتیجه ای که نزدیک تر به آن مشخص شده است، اما می تواند بر نحوه نمایش سایر محتویات صفحه تاثیر بگذارد. حاشیه سمت راست: خودکار؛ و حاشیه سمت چپ: خودکار؛ W3C به عنوان یک جایگزین توصیه می شود.
در اینجا یک مثال معتبر با استفاده از خصوصیت align است:
align = "right" >
این جدول راست تراز شده است
جریان متن در اطراف آن به سمت چپ است
با استفاده از خصوصیت align، یک مثال ضعیف مشاهده کنید.
و برای به دست آوردن اثر مشابه با معتبر (غیر معتبر) HTML، نوشتن:
style = "شناور: راست؛" >
این جدول راست تراز شده است
جریان متن در اطراف آن به سمت چپ است
موارد زیر TABLE را توضیح می دهد که جزء مشخصات هر HTML نیستند.
اطلاعات قبلی توصیف ویژگی های عنصر HTML که در HTML 4.01 معتبر هستند اما در HTML5 منسوخ شده اند.
در زیر مشخص می شود که TABLE در هیچ یک از مشخصه های فعلی معتبر نیست. اگر شما اهمیتی نمی دهید که آیا صفحات شما اعتبار دارند و کاربران شما از یک مرورگر پشتیبانی می کند که از این عناصر پشتیبانی می کند، می توانید از این عناصر استفاده کنید. اما اغلب آنها در مرورگرهای مدرن پشتیبانی نمی شوند و یا جایگزین هایی دارند که استانداردهای بیشتری دارند.
ما توصیه نمی کنیم از این ویژگی ها در جداول HTML خود استفاده کنیم.
این ویژگی یک ویژگی قدیمی است که قبل از اینکه CSS به طور گسترده پشتیبانی شود، شامل شد. این اجازه می دهد تا شما تغییر رنگ پس زمینه جدول. شما می توانید نام رنگ یا کد هگزادسیمال را تنظیم کنید. این ویژگی هنوز در بسیاری از مرورگرها کار می کند، اما برای HTML باقی مانده، شما نباید از آن استفاده کنید و از CSS استفاده کنید.
جایگزین بهتر این خصیصه اموال سبک است.
برای تغییر رنگ پس زمینه یک جدول، نوشتن:
style = "background-color: #ccc؛" >
این جدول یک پس زمینه خاکستری دارد
همانند ویژگی bgcolor، ویژگی bordercolor به شما اجازه می دهد تا رنگ مشخصه را تغییر دهید. این ویژگی تنها توسط اینترنت اکسپلورر پشتیبانی می شود. در عوض، باید از ویژگی style style border-color استفاده کنید.
برای تغییر رنگ مرز جدول خود، نوشتن:
style = "border-color: red؛" >
این جدول یک حاشیه قرمز دارد.
ویژگی های bordercolorlight و bordercolordark در Internet Explorer گنجانده شده است تا شما بتوانید یک مرز سه بعدی در اطراف جدول خود ایجاد کنید. با این حال، از IE8 و بالاتر، این تنها در حالت استاندارد IE7 و حالت Quirks پشتیبانی می شود . مایکروسافت بیان می کند که این ویژگی ها دیگر پشتیبانی نمی شوند.
برای یک زمان کوتاه، عناصر cols در عنصر TABLE برای کمک به مرورگر ها می دانند که تعداد ستون ها یک جدول است. فرض این بود که این کمک می کند تا ارائه دهی جداول بزرگ را سریع تر کند. با این حال آن را تنها توسط اینترنت اکسپلورر اجرا شد، و از IE8 و بالاتر، این تنها در حالت استاندارد IE7 و حالت Quirks پشتیبانی می کند.
از آنجا که یک ویژگی عرض (وجود دارد در HTML5 منسوخ شده است) بسیاری از افراد تصور می کردند که یک ویژگی ارتفاع برای جداول نیز وجود دارد. اما به دلیل اینکه جداول مطابق با عرض محتوای آنها یا عرض تعریف شده در ویژگی CSS یا عرض، ارتفاع را نمی توان محدود کرد. بنابراین، به جای آن، مرورگرها به ویژگی ارتفاع اجازه می دهند که حداقل ارتفاع جدول تعریف شود. اگر جدول بلندتر از ارتفاع باشد، آن را بلند تر نشان خواهد داد. اما شما باید از اموال استفاده کنید
با استفاده از امكان ارتفاع CSS شما می توانید ارتفاع را با استفاده از ویژگی CSS نیز محدود كنید تا تعریف كنید كه چه اتفاقی با محتوای بیش از حد رخ می دهد.
برای تنظیم حداقل ارتفاع روی یک جدول، نوشتن:
style = "height: 30em؛" >
این جدول حداقل 30 عدد بالاتر است.
دو ویژگی و فضای اطراف سمت چپ / راست (hspace) و بالا / پایین (vspace) جدول اضافه شده است. شما باید به جای آن از اموال سبک استفاده کنید.
برای تنظیم فضای عمودی به 20 پیکسل و فضای افقی تا 40 پیکسل، بنویسید:
style = "margin: 20px 40px؛"
این جدول دارای vspace 20 پیکسل و hspace 40 پیکسل است.
خصیصه یک ویژگی بولی است که تعریف می کند که آیا محتویات جدول باید در لبه عنصر parent یا پنجره قرار بگیرد یا پیمایش افقی را خالی کند. در عوض، باید ویژگی های بسته بندی هر سلول جدول را با استفاده از ویژگی CSS تعریف کنید.
برای ایجاد یک ستون با مقدار زیادی از متن بسته بندی نکنید، بنویسید:
style = "white-space: nowrap؛" > این یک ستون با یک تن از محتوا است. اما حتی اگر از ظرف بزرگ تر باشد، متن نباید به خط بعدی بسته شود، اما به جای آن پنجره مرورگر را مجبور به حرکت به صورت افقی برای دیدن همه مطالب می کند.
در نهایت، صفت تعریف می کند که چگونه محتویات هر سلول باید درون سلول به طور عمودی اصلاح شود. به جای این خصیصه نامعتبر، شما باید از ویژگی CSS در هر سلولی که می خواهید تغییر هماهنگ را تغییر دهید، استفاده کنید. شما اثرات این سبک را متوجه نمی شوید مگر اینکه محتوای سلول آن کمتر از فضای موجود ایجاد شده توسط دیگر سلول های بزرگتر باشد.
برای تحمیل یک سلول به سمت پایین (به جای وسط به صورت پیشفرض)، نوشتن:
این سلول طولانی تر از بقیه است و بنابراین ارتفاع را بلندتر خواهد کرد. بنابراین شما خواهید دید که سلول به صورت عمودی تراز شده به پایین تراز است.
style = "vertical-align: bottom؛" > مطالب در پایین.
محتویات در وسط.