داده های جدول

دسته بندی :دسته‌بندی نشده 3 دسامبر 2022 علیرضا بابامرادی 162

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

لایه برداری سلول ها

یک سلول پر شده تا حدودی شوم به نظر می رسد، اما افزودن ویژگی padding به سلول‌های جدول می‌تواند تفاوت زیادی در ظاهر داده‌های جدول ایجاد کند:

table tr td {

border: 1px solid black;

border-collapse: collapse;

padding: 10px;

}وقتی مقداری فضای اضافی در داخل سلول‌های جدول فراهم می‌کنید، گزینه‌های بیشتری در مورد مکان نمایش داده‌ها در جدول خواهید داشت.

تراز کردن متن در سلول ها

می‌توانید داده‌ها را در سمت چپ، مرکز یا سمت راست سلول با ویژگی text-align:

table th {

border: 1px solid black;

border-collapse: collapse;

padding: 10px;

text-align: center;

}این تعریف متن را در عناصر سرصفحه جدول (th) متمرکز می کند. اگر شما هم بخواهید برای انتقال متن به سمت بالا در داخل سلول، از ویژگی vertical-align استفاده کنید.

جداول رنگ آمیزی

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

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

یک رنگ متفاوت، مانند این:

tr: nth-child(even) {

background-color: lightgreen;

}اگر به اندازه کافی سن دارید که روزهای گزارش رایانه اصلی را به خاطر بسپارید، این باید خاطرات را زنده کند!

یکی دیگر از ویژگی‌هایی که مفید است، استفاده از کلاس شبه شناور برای تغییر رنگ پس‌زمینه یک سلول جداگانه است، زیرا بازدیدکننده سایت شما نشانگر ماوس را روی آن قرار می‌دهد:

tdtd: hover {

background-color: yellow;

}اکنون همه چیز واقعاً شروع به فانتزی شدن کرده است!

عناصر موقعیت یابی

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

شما یک صفحه وب ایجاد خواهید کرد که شامل پنج بخش است:

»» هدر برای نمایش در بالای صفحه وب

»» پاورقی برای نمایش در پایین صفحه وب

»»بخش ناوبری برای نمایش در سمت چپ بخش میانی

»»بخشی کناری برای نمایش در سمت راست بخش میانی

»»یک بخش محتوای اصلی برای نمایش در وسط بخش میانی این یک ساختار طرح بندی صفحه وب بسیار استاندارد است، که مطمئن هستم که شما بارها آن را هنگام مرور وب مشاهده کرده اید.

برای اجرای تست مراحل زیر را دنبال کنید:

1. ویرایشگر متن، ویرایشگر برنامه یا بسته IDE مورد علاقه خود را باز کنید و کد زیر را وارد کنید:

<!DOCTYPE html>

<html>

<head>

<title>Positioning Test</title>

<style>

header {

background-color: red;

margin: 0px;

padding: 10px;

height: 25px;

width: 600px;

}

nav {

background-color: blue;

margin: 0px;

padding: 10px;

height: 125px;

width: 200px;

}

section {

background-color: green;

margin: 0px;

padding: 10px;

height: 125px;

width: 200px;

}

aside {

background-color: yellow;

margin: 0px;

padding: 10px;

height: 125px;

width: 200px;

}

footer {

background-color: orange;

margin: 0px;

padding: 10px;

height: 25px;

width: 600px;

}

</style>

</head>

<body>

<header><p>This is the header</p></header>

<nav><p>Navigation</p></nav>

<section><p>Section</p></section>

<aside><p>Aside</p></aside>

<footer><p>This is the footer</p></footer>

</body>

</html>

علیرضا بابامرادی

تاریخ عضویت:19 سپتامبر 2022

راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) عضویت در کانال

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

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

دیدگاهتان را بنویسید لغو پاسخ

لینک کوتاه:

داده های جدول

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

دیدگاهتان را بنویسید لغو پاسخ

مزایای عضویت در سیگما:

نوشته‌های تازه

آخرین دیدگاه‌ها

دسته بندی مطالب

لینک های کمکی

خدمات اداری

خدمات تیم نهال آی تی

خدمات تیم نهال آی تی

نماد اعتماد الکترونیکی