این پست در ابتدا در thedevspace.io منتشر شد. همه چیز شما برای تسلط بر توسعه وب نیاز دارید ، همه در یک مکانبشر
یک جدول HTML اساسی ساختار زیر را دارد:
John Doe
30
Software Engineer
USA
john.doe@example.com
Jane Smith
28
Data Scientist
Canada
jane.smith@example.com
. . .
هر یک
element defines a table cell (td مخفف داده های جدول است).
بعضی اوقات ، ممکن است بخواهید یک هدر جدول اضافه کنید که در مورد نوع داده هایی که ردیف یا ستون در آن قرار دارد ، اطلاعاتی را ارائه می دهد. هدر جدول با
element.
Name
Age
Occupation
Country
Email
John Doe
30
Software Engineer
USA
john.doe@example.com
. . .
برای ایجاد یک هدر عمودی ، قرار دهید
element as the first child element inside each table row:
Name
John Doe
. . .
Age
30
. . .
. . .
➡ نمایش نسخه ی نمایشی
مرز میز
پیش از این ، ما از این ویژگی استفاده کردیم border="1" برای اضافه کردن مرز برای جدول. با این حال ، در عمل ، بهتر است از CSS برای کنترل ظاهر جدول مانند این استفاده کنید:
table,
th,
td {
border: 1px solid;
}
به طور پیش فرض ، جدول دارای یک مرز مضاعف است. این به این دلیل است که هر دو عنصر جدول (
) and each individual table cell (
) have their own borders. Using CSS, you may collapse them into one by setting a table-collapse خاصیت
table {
border-collapse: collapse;
}
گذشته از این جزئیات کوچک ، مرز جدول دقیقاً مانند مرز سایر مؤلفه های HTML که تاکنون در مورد آنها بحث کرده ایم عمل می کند. به عنوان مثال ، می توانید عرض مرز ، رنگ و شعاع را سفارشی کنید:
➡ نمایش نسخه ی نمایشی
سلولهایی که چندین ردیف و ستون دارند
به طور پیش فرض ، هر سلول جدول یک ردیف و یک ستون را اشغال می کند ، اما در این حالت ، نامبا پیریوت شغل بیش از دو ردیف فاصله دارد ، و اطلاعات تماس بیش از دو ستون برای این جدول معنی دارد.
این اثر را می توان با استفاده از colspan وت rowspan ویژگی ها
border="1">
rowspan="2">Name
rowspan="2">Age
rowspan="2">Occupation
colspan="2">Contact Information
Email
Phone
John Doe
30
Software Engineer
john.doe@example.com
123-456-7890
Jane Smith
28
Data Scientist
jane.smith@example.com
987-654-3210
➡ نمایش نسخه ی نمایشی
میز خود را طراحی کنید
درست مانند هر عنصر سطح بلوک دیگر ، می توانید عرض و ارتفاع سلولهای جدول و جدول را تعریف کنید.
table,
th,
td {
border: 1px solid;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
height: 50px;
}
همانطور که می بینید ، وقتی فضاهای اضافی وجود دارد ،
will be vertically centered and horizontally left-aligned. The
will be centered both vertically and horizontally.
You can customize the alignment using text-align وت vertical-align خواص text-align تراز افقی را تغییر می دهد ، و vertical-align تراز عمودی را تغییر می دهد.
th,
td {
height: 50px;
text-align: center;
vertical-align: center;
}
ما در مورد چگونگی تراز کردن عناصر بعداً بیشتر بحث خواهیم کرد.
قرائت های بیشتر
اگر این راهنما را مفید دانستید ، برای راهنمایی ها ، آموزش ها و به روزرسانی های بیشتر در مورد توسعه وب ، ما را در رسانه های اجتماعی دنبال کنید:
🔹 thedevspace | وابسته به لینکدین
🔹 thedevspace | x
🔹 thedevspace | نخ
بیایید در ارتباط باشیم! 🚀
بعدی را بخوانید
من پانداها را با این جایگزین کردم. تغییر بازی!
منبع
بهترین گزینه های playit.gg در سال 2025
رعد و برق توسعه دهنده -
سیستم فایل لینوکس توضیح داد: هر آنچه شما باید بدانید
دارشان راتود -
یادگیری ماشین در ضبط کربن
مهندس شیمی -
