طراحی جدول زیبا با css و html
جداول پیشفرض HTML بسیار ضعیف به نظر میرسند – برای ساخت و طراحی جدول زیبا به برخی از جلوههای CSS نیاز خواهید داشت.
اضافه کردن یک جدول به وب سایت شما یک راه مفید برای ارائه حجم زیادی از اطلاعات به وضوح است. جداول همچنین استفاده بهینه از فضا را فراهم می کنند و به شما امکان می دهند داده های پیچیده را راحت تر بخوانید و مقایسه کنید.
با استفاده از CSS می توانید جداول را طوری طراحی کنید که از نظر بصری جذاب تر باشند. انجام این کار همچنین می تواند تجربه کلی کاربر را برای وب سایت شما افزایش دهد.
طراحی مدرن تک ردیف و ستون
می توانید یک طرح جدول ساده با ردیف ها و ستون ها و بدون سلول های ادغام شده اضافه کنید. سبک دادن به جدول همچنین تضمین می کند که صفحه وب شما برای کاربر جذاب است.
می توانید کد این تمرین را در مخزن GitHub آن مشاهده کنید .
در یک فایل HTML جدید، ساختار اصلی کد HTML را اضافه کنید:
<!DOCTYPE html> <html> <head> <title>My Simple Table</title> </head> <body> </body> </html>
در داخل بدنه، برچسب های جدول را اضافه کنید:
<table> </table>
عنصر جدول HTML باید حاوی تگ های ردیف جدول برای هر سطر در داخل جدول باشد. ردیف بالا معمولا برای سرفصل ها استفاده می شود. از تگ های HTML سرصفحه جدول برای نشان دادن هر ستون در جدول استفاده کنید :
<tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr>
سطرهای بیشتری در زیر ردیف سرصفحه اضافه کنید. از تگ های HTML داده های جدول برای اضافه کردن داده ها به هر سلول جدول استفاده کنید :
<tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> </tr> <tr> <td>Row 4, Column 1</td> <td>Row 4, Column 2</td> <td>Row 4, Column 3</td> </tr> <tr> <td>Row 5, Column 1</td> <td>Row 5, Column 2</td> <td>Row 5, Column 3</td> </tr>
یک تگ سبک در داخل تگ head اضافه کنید. یک استایل کلی به جدول اضافه کنید، مانند سایه ها، گوشه های گرد جدول، فونت ها و حاشیه ها:
<style> table { border-collapse: collapse; width: 100%; color: #333; font-family: Arial, sans-serif; font-size: 14px; text-align: left; border-radius: 10px; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); margin: auto; margin-top: 50px; margin-bottom: 50px; } </style>
هدر جدول را استایل دهید تا رنگ پس زمینه و متن تراز شده به آن بدهید:
table th { background-color: #ff9800; color: #fff; font-weight: bold; padding: 10px; text-transform: uppercase; letter-spacing: 1px; border-top: 1px solid #fff; border-bottom: 1px solid #ccc; }
ردیفهای جدول را به گونهای طراحی کنید که بین رنگهای خاکستری و سفید به طور متناوب تغییر کنند، و هنگام قرار دادن ماوس روی ردیف، جلوهای به آن اضافه کنید:
table tr:nth-child(even) td { background-color: #f2f2f2; } table tr:hover td { background-color: #ffedcc; }
داده های داخل سلول های جدول را استایل بدهید :
table td { background-color: #fff; padding: 10px; border-bottom: 1px solid #ccc; font-weight: bold; }
فایل HTML خود را برای مشاهده جدول در مرورگر وب باز کنید :
طراحی جدول سلولی چند خطی
برخی از جداول شامل ستون هایی با ردیف های ادغام شده برای تشکیل یک سلول چند خطی هستند.
تمام ردیفهای جدول فعلی را حذف کنید، فقط ردیف بالا را با عنوانها نگه دارید:
<table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </table>
با استفاده از ویژگی rowspan یک سلول چند خطی ایجاد کنید. این کد سلول را در تعداد ردیف های مشخص شده گسترش می دهد.
<!-- Section 1 --> <tr> <td rowspan="2">Multi-line cell</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr>
هنگام اضافه کردن یک خط چند سلولی دیگر با مقدار فاصله ردیف متفاوت، تعداد متناظر از تگ های HTML ردیف های جدول را اضافه کنید. این کار برای مطابقت با ارتفاع یا تعداد ردیف هایی است که سلول در سراسر آن قرار دارد. به عنوان مثال، اگر یک سلول دارای ۳ ردیف باشد، باید سه ردیف به ستون های دیگر اضافه کنید تا جدول به درستی تراز شود.
<!-- Section 2 --> <tr> <td rowspan="3">Multi-line cell</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> </tr> <tr> <td>Row 4, Column 2</td> <td>Row 4, Column 3</td> </tr> <tr> <td>Row 5, Column 2</td> <td>Row 5, Column 3</td> </tr>
فایل HTML خود را برای مشاهده جدول در مرورگر وب باز کنید:
طراحی جدول ردیف ادغام شده
مانند سلول های چند خطی، جداول همچنین می توانند دارای ردیف هایی باشند که در چندین ستون ادغام شوند.
تمام ردیفهای جدول فعلی را حذف کنید، فقط ردیف بالا را با عنوانها نگه دارید:
<table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </table>
سطرهای جدول بیشتری را به جدول اضافه کنید. از ویژگی colspan برای ادغام یکی از سطرها در ۳ ستون استفاده کنید:
<!-- Section 1 --> <tr> <td style="background-color: #ffedcc" colspan="3">Q1</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> </tr> <tr> <td>Row 4, Column 1</td> <td>Row 4, Column 2</td> <td>Row 4, Column 3</td> </tr>
یک ردیف ادغام شده دیگر برای جدا کردن بخش های جدول اضافه کنید:
<!-- Section 2 --> <tr> <td style="background-color: #ffedcc" colspan="3">Q2</td> </tr> <tr> <td>Row 6, Column 1</td> <td>Row 6, Column 2</td> <td>Row 6, Column 3</td> </tr> <tr> <td>Row 7, Column 1</td> <td>Row 7, Column 2</td> <td>Row 7, Column 3</td> </tr> <tr> <td>Row 8, Column 1</td> <td>Row 8, Column 2</td> <td>Row 8, Column 3</td> </tr>
فایل HTML خود را برای مشاهده جدول در مرورگر وب باز کنید:
از جداول جذاب برای استفاده بهینه از داده های خود استفاده کنید
جداول HTML راهی عالی برای نمایش داده های ساختاریافته در وب سایت شما هستند. برای طراحی جدول زیبا می توانید آنها را با CSS استایل دهید. اگر علاقه مند به یادگیری بهتر html هستید ، دوره رایگان ما با عنوان آموزش رایگان html با بهترین دوره آموزشی را دنبال کنید.
خیلی هم عالی
همه کدها را یکجا هم قرار می دادید خیلی خوب می شد. هر چند همین طوری هم خیلی عالیه
سپاسگزارم
کارم را راحت کردید.