آموزش برنامه نویسی وب🌐: بخش css قسمت ششم(استایل‌دهی لیست‌ها و جداول)

استایل‌دهی لیست‌ها و جداول در CSS

یکی از مهم‌ترین بخش‌های طراحی وب، مدیریت نمایش لیست‌ها و جداول است. این عناصر نقش مهمی در نمایش داده‌ها، منوهای ناوبری، ساختاردهی اطلاعات و بهبود تجربه کاربری دارند. با استفاده از CSS می‌توان به لیست‌ها و جداول ظاهر جذاب‌تر، خواناتر و کاربرپسندتری بخشید.

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

در ادامه می‌توانید فهرست موضوعاتی را مشاهده کنید که در این آموزش بررسی می‌شوند:

1. مقدمه‌ای بر لیست‌ها در HTML
معرفی انواع لیست‌ها (مرتب، غیر مرتب و توضیحی) و کاربرد آن‌ها.
2. انواع نشان‌گرها در لیست‌های غیر مرتب
شخصی‌سازی Bullet Points با استفاده از CSS و تصاویر.
3. تغییر فرمت شماره‌گذاری در لیست‌های مرتب
استفاده از خواص CSS برای تغییر نوع شماره‌گذاری (مثل اعداد رومی یا حروف الفبا).
4. لیست‌های تو در تو
استایل‌دهی لیست‌های چند سطحی و مدیریت فاصله‌ها.
5. ساخت منوهای ناوبری با استفاده از لیست‌ها
تبدیل لیست‌های HTML به منوهای ناوبری زیبا با CSS.
6. استایل‌دهی با استفاده از شبه‌عناصر
استفاده از شبه‌عناصر مثل ::before و ::after برای شخصی‌سازی بیشتر.
7. معرفی و ساختار جداول در HTML
آشنایی با تگ‌های اصلی جدول مثل
8. طراحی Borders جداول
ایجاد و تنظیم خطوط اطراف جدول و سلول‌ها با CSS.
9. تنظیم فاصله‌ها در جداول
استفاده از خواص padding و border-spacing برای بهبود چیدمان.
10. افزودن رنگ و استایل به ردیف‌ها
تغییر رنگ پس‌زمینه سلول‌ها و ردیف‌ها برای خوانایی بهتر.

در HTML، برای ایجاد لیست‌های غیر مرتب (unordered lists)، از تگ <ul> استفاده می‌شود. هر عنصر در این لیست با تگ <li> مشخص می‌شود. نشان‌گرهای پیش‌فرض برای لیست‌های غیر مرتب معمولاً دایره‌ای (disc) هستند، اما می‌توان انواع مختلفی از نشان‌گرها را با استفاده از CSS تغییر داد. در زیر به انواع نشان‌گرها و نحوه استفاده از آن‌ها اشاره می‌شود:

1. نشان‌گر دایره‌ای (Disc)

این نشان‌گر پیش‌فرض است و به صورت دایره‌ای پر شده نمایش داده می‌شود.


<ul style="list-style-type: disc;">
    <li>مورد اول</li>
    <li>مورد دوم</li>
    <li>مورد سوم</li>
</ul>

پیش نمایش:

مورد اول
مورد دوم
مورد سوم

2. نشان‌گر مربع (Square)

این نشان‌گر به صورت مربع پر شده نمایش داده می‌شود.


<ul style="list-style-type: square;">
    <li>مورد اول</li>
    <li>مورد دوم</li>
    <li>مورد سوم</li>
</ul>

پیش نمایش:

مورد اول
مورد دوم
مورد سوم

3. نشان‌گر خالی (None)

این گزینه نشان‌گرها را حذف می‌کند و فقط متن لیست را نمایش می‌دهد.


<ul style="list-style-type: none;">
    <li>مورد اول</li>
    <li>مورد دوم</li>
    <li>مورد سوم</li>
</ul>

پیش نمایش:

مورد اول
مورد دوم
مورد سوم

4. نشان‌گر دایره‌ای توخالی (Circle)

ین نشان‌گر به صورت دایره‌ای توخالی نمایش داده می‌شود.


<ul style="list-style-type: circle;">
    <li>مورد اول</li>
    <li>مورد دوم</li>
    <li>مورد سوم</li>
</ul>

پیش نمایش:

مورد اول
مورد دوم
مورد سوم

5. استفاده از تصاویر به عنوان نشان‌گر

شما می‌توانید از تصاویر به عنوان نشان‌گر استفاده کنید. برای این کار می‌توانید از CSS استفاده کنید.


<ul style="list-style-type: none;">
    <li style="list-style-image: url('path/to/image.png');">مورد اول</li>
    <li style="list-style-image: url('path/to/image.png');">مورد دوم</li>
    <li style="list-style-image: url('path/to/image.png');">مورد سوم</li>
</ul>

6. استفاده از CSS برای سفارشی‌سازی نشان‌گرها

شما می‌توانید با استفاده از CSS، نشان‌گرها را به صورت دلخواه سفارشی‌سازی کنید. به عنوان مثال، می‌توانید رنگ، اندازه و نوع نشان‌گر را تغییر دهید.


<ul style="list-style-type: none;">
    <li style="position: relative; padding-left: 20px;">
        <span style="position: absolute; left: 0; top: 0; color: red;">★</span>
        مورد اول
    </li>
    <li style="position: relative; padding-left: 20px;">
        <span style="position: absolute; left: 0; top: 0; color: green;">★</span>
        مورد دوم
    </li>
    <li style="position: relative; padding-left: 20px;">
        <span style="position: absolute; left: 0; top: 0; color: blue;">★</span>
        مورد سوم
    </li>
</ul>

پیش نمایش:

★ مورد اول
★ مورد دوم
★ مورد سوم

تغییر فرمت شماره‌گذاری در لیست‌های مرتب

1. شماره‌گذاری پیش‌فرض (Decimal)

این فرمت به صورت عددی (1، 2، 3 و ...) نمایش داده می‌شود و پیش‌فرض است.


<ol>
    <li>مورد اول</li>
    <li>مورد دوم</li>
    <li>مورد سوم</li>
</ol>

پیش نمایش:

مورد اول
مورد دوم
مورد سوم

2. شماره‌گذاری با حروف بزرگ (Uppercase Letters)

این فرمت با حروف بزرگ انگلیسی (A، B، C و ...) نمایش داده می‌شود.


<ol type="A">
    <li>مورد اول</li>
    <li>مورد دوم</li>
    <li>مورد سوم</li>
</ol>

پیش نمایش:

مورد اول
مورد دوم
مورد سوم

3. شماره‌گذاری با حروف کوچک (Lowercase Letters)

این فرمت با حروف کوچک انگلیسی (a، b، c و ...) نمایش داده می‌شود.


<ol type="a">
    <li>مورد اول</li>
    <li>مورد دوم</li>
    <li>مورد سوم</li>
</ol>

پیش نمایش:

مورد اول
مورد دوم
مورد سوم

4. شماره‌گذاری با اعداد رومی بزرگ (Uppercase Roman Numerals)

این فرمت با اعداد رومی بزرگ (I، II، III و ...) نمایش داده می‌شود.


<ol type="I">
    <li>مورد اول</li>
    <li>مورد دوم</li>
    <li>مورد سوم</li>
</ol>

پیش نمایش:

مورد اول
مورد دوم
مورد سوم

5. شماره‌گذاری با اعداد رومی کوچک (Lowercase Roman Numerals)

این فرمت با اعداد رومی کوچک (i، ii، iii و ...) نمایش داده می‌شود.


<ol type="i">
    <li>مورد اول</li>
    <li>مورد دوم</li>
    <li>مورد سوم</li>
</ol>

پیش نمایش:

مورد اول
مورد دوم
مورد سوم

6. تغییر شماره‌گذاری با CSS

شما همچنین می‌توانید با استفاده از CSS، فرمت شماره‌گذاری را تغییر دهید. به عنوان مثال، می‌توانید از list-style-type برای تغییر نوع شماره‌گذاری استفاده کنید.


<ol style="list-style-type: upper-alpha;">
    <li>مورد اول</li>
    <li>مورد دوم</li>
    <li>مورد سوم</li>
</ol>

پیش نمایش:

مورد اول
مورد دوم
مورد سوم

توضیح:	کد:
decimal: شماره‌گذاری عددی (1، 2، 3 و ...)	list-style-type: decimal;
decimal-leading-zero: شماره‌گذاری عددی با صفر پیش‌رو (01، 02، 03 و ...)	list-style-type: decimal-leading-zero;
lower-alpha: شماره‌گذاری با حروف کوچک (a، b، c و ...)	list-style-type: lower-alpha;
upper-alpha: شماره‌گذاری با حروف بزرگ (A، B، C و ...)	list-style-type: upper-alpha;
lower-roman: شماره‌گذاری با اعداد رومی کوچک (i، ii، iii و ...)	list-style-type: lower-roman;
upper-roman: شماره‌گذاری با اعداد رومی بزرگ (I، II، III و ...)	list-style-type: upper-roman;

لیست‌های تو در تو

استایل‌دهی و مدیریت فاصله‌ها برای لیست‌های چند سطحی در طراحی وب می‌تواند تاثیر زیادی بر ظاهر و کارایی داشته باشد. در اینجا نحوه استفاده از لیست‌های تو در تو به همراه استایل‌دهی مناسب را بررسی خواهیم کرد.


  <ul>
    <li>سطح اول
      <ul>
        <li>سطح دوم
          <ul>
            <li>سطح سوم</li>
            <li>سطح سوم</li>
          </ul>
        </li>
        <li>سطح دوم</li>
      </ul>
    </li>
    <li>سطح اول</li>
  </ul>

برای مدیریت فاصله‌ها و استایل‌دهی مناسب به این لیست‌ها، می‌توان از CSS استفاده کرد. در زیر یک مثال ساده از استایل‌دهی برای لیست‌های تو در تو آورده شده است:


  ul {
    list-style-type: none; /* حذف نقاط */
    margin: 0;
    padding: 0;
  }

  li {
    margin-bottom: 10px; /* فاصله بین آیتم‌ها */
  }

  ul ul li {
    margin-left: 20px; /* فاصله برای سطح‌های پایین‌تر */
  }

  ul ul ul li {
    margin-left: 40px; /* فاصله بیشتر برای سطح سوم */
  }

با این استایل‌ها، لیست‌ها به صورت تو در تو با فاصله‌های مناسب از هم نمایش داده خواهند شد.

ساخت منوهای ناوبری با استفاده از لیست‌ها

در این بخش، نحوه تبدیل لیست‌های HTML به منوهای ناوبری زیبا با استفاده از CSS را بررسی می‌کنیم.

1. منوی ناوبری ساده

یک منوی ساده افقی با استفاده از لیست HTML:


  <ul class="navbar">
    <li><a href="#home">خانه</a></li>
    <li><a href="#services">خدمات</a></li>
    <li><a href="#about">درباره ما</a></li>
    <li><a href="#contact">تماس</a></li>
  </ul>

2. منوی ناوبری کشویی

منوی کشویی با لیست‌های تو در تو:


<ul class="dropdown-navbar">
    <li><a href="#home">خانه</a></li>
    <li><a href="#services">خدمات</a></li>
    <li class="dropdown">
      <a href="#about">درباره ما</a>
      <ul class="dropdown-content">
        <li><a href="#team">تیم</a></li>
        <li><a href="#history">تاریخچه</a></li>
      </ul>
    </li>
    <li><a href="#contact">تماس</a></li>
  </ul>

3. منوی ناوبری عمودی

یک منوی عمودی ساده:


  <ul class="vertical-navbar">
    <li><a href="#home">خانه</a></li>
    <li><a href="#services">خدمات</a></li>
    <li><a href="#about">درباره ما</a></li>
    <li><a href="#contact">تماس</a></li>
  </ul>

CSS مربوط به منوها

استایل‌های CSS برای سه مدل منو:


/* استایل برای منوی ناوبری ساده */
.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex;
}

.navbar li {
  flex: 1;
}

.navbar li a {
  display: block;
  padding: 14px;
  text-decoration: none;
  color: white;
  text-align: center;
}

.navbar li a:hover {
  background-color: #575757;
}

/* استایل برای منوی ناوبری کشویی */
.dropdown-navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex;
}

.dropdown-navbar li {
  position: relative;
}

.dropdown-navbar li a {
  display: block;
  padding: 14px 20px;
  text-decoration: none;
  color: white;
  text-align: center;
}

.dropdown-navbar li a:hover {
  background-color: #575757;
}

.dropdown .dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown .dropdown-content li {
  border-bottom: 1px solid #ddd;
}

.dropdown .dropdown-content li a {
  padding: 12px;
  color: white;
  text-align: left;
}

.dropdown .dropdown-content li a:hover {
  background-color: #575757;
}

/* استایل برای منوی عمودی */
.vertical-navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #4CAF50;
  width: 200px;
}

.vertical-navbar li {
  border-bottom: 1px solid #ddd;
}

.vertical-navbar li a {
  display: block;
  padding: 12px;
  text-decoration: none;
  color: white;
  text-align: left;
}

.vertical-navbar li a:hover {
  background-color: #45a049;
}

استایل‌دهی با استفاده از شبه‌عناصر برای لیست‌ها

شبه‌عناصر ::before و ::after به شما این امکان را می‌دهند که عناصر تزئینی به محتوای خود اضافه کنید بدون اینکه نیاز به اضافه کردن HTML اضافی داشته باشید. در اینجا چند مثال برای استفاده از این شبه‌عناصر در لیست‌ها آورده شده است.

1. اضافه کردن نماد تزئینی به آیتم‌های لیست

در این مثال، یک نماد دایره‌ای قبل از هر آیتم لیست اضافه می‌کنیم:


      <ul class="styled-list">
        <li>آیتم اول</li>
        <li>آیتم دوم</li>
        <li>آیتم سوم</li>
      </ul>


      .styled-list {
        list-style: none;
        padding: 0;
      }

      .styled-list li {
        position: relative;
        padding-left: 25px;
      }

      .styled-list li::before {
        content: "•";
        position: absolute;
        left: 0;
        top: 0;
        font-size: 20px;
        color: #007bff;
      }

2. اضافه کردن خط بعد از آیتم‌ها

در این مثال، خطی زیر هر آیتم لیست اضافه می‌کنیم:


      <ul class="styled-list-with-line">
        <li>آیتم اول</li>
        <li>آیتم دوم</li>
        <li>آیتم سوم</li>
      </ul>


      .styled-list-with-line {
        list-style: none;
        padding: 0;
      }

      .styled-list-with-line li {
        position: relative;
        padding-bottom: 10px;
      }

      .styled-list-with-line li::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #ccc;
        display: block;
      }

3. افزودن پیکان قبل از آیتم‌ها

در این مثال، پیکان کوچکی قبل از هر آیتم لیست نمایش داده می‌شود:


      <ul class="styled-list-with-arrow">
        <li>آیتم اول</li>
        <li>آیتم دوم</li>
        <li>آیتم سوم</li>
      </ul>


      .styled-list-with-arrow {
        list-style: none;
        padding: 0;
      }

      .styled-list-with-arrow li {
        position: relative;
        padding-left: 20px;
      }

      .styled-list-with-arrow li::before {
        content: "➤";
        position: absolute;
        left: 0;
        top: 0;
        font-size: 20px;
        color: #f39c12;
      }

4. اضافه کردن علامت به انتهای هر آیتم

در این مثال، یک علامت تعجب به انتهای هر آیتم لیست اضافه می‌شود:


      <ul class="styled-list-with-exclamation">
        <li>آیتم اول</li>
        <li>آیتم دوم</li>
        <li>آیتم سوم</li>
      </ul>


      .styled-list-with-exclamation {
        list-style: none;
        padding: 0;
      }

      .styled-list-with-exclamation li {
        position: relative;
        padding-right: 20px;
      }

      .styled-list-with-exclamation li::after {
        content: "!";
        position: absolute;
        right: 0;
        top: 0;
        font-size: 20px;
        color: #e74c3c;
      }

5. استفاده از دایره‌های تزئینی به جای نقاط

در این مثال، به جای نقطه‌های پیش‌فرض، دایره‌های رنگی به آیتم‌ها اضافه می‌شود:


      <ul class="styled-list-with-circles">
        <li>آیتم اول</li>
        <li>آیتم دوم</li>
        <li>آیتم سوم</li>
      </ul>


      .styled-list-with-circles {
        list-style: none;
        padding: 0;
      }

      .styled-list-with-circles li {
        position: relative;
        padding-left: 30px;
      }

      .styled-list-with-circles li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 10px;
        height: 10px;
        background-color: #3498db;
        border-radius: 50%;
      }

طراحی Borders جداول

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

1. طراحی جدول ساده با خطوط مرزی

در این مثال، یک جدول ساده با خطوط مرزی اطراف خود و سلول‌ها طراحی می‌شود:


      <table class="simple-table">
        <tr>
          <th>نام</th>
          <th>سن</th>
        </tr>
        <tr>
          <td>علی</td>
          <td>25</td>
        </tr>
        <tr>
          <td>مریم</td>
          <td>30</td>
        </tr>
      </table>


      .simple-table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #ccc;
      }

      .simple-table th, .simple-table td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
      }

2. طراحی جدول با خطوط مرزی دوگانه

در این مثال، از خطوط دوگانه برای جدول و سلول‌ها استفاده می‌کنیم:


      <table class="double-border-table">
        <tr>
          <th>نام</th>
          <th>سن</th>
        </tr>
        <tr>
          <td>علی</td>
          <td>25</td>
        </tr>
        <tr>
          <td>مریم</td>
          <td>30</td>
        </tr>
      </table>


      .double-border-table {
        width: 100%;
        border-collapse: collapse;
        border: 3px double #4CAF50;
      }

      .double-border-table th, .double-border-table td {
        padding: 10px;
        text-align: left;
        border: 3px double #4CAF50;
      }

3. طراحی جدول با خطوط مورب در سلول‌ها

در این مثال، خطوط مورب در سلول‌ها به‌طور خاص طراحی شده‌اند:


      <table class="diagonal-border-table">
        <tr>
          <th>نام</th>
          <th>سن</th>
        </tr>
        <tr>
          <td>علی</td>
          <td>25</td>
        </tr>
        <tr>
          <td>مریم</td>
          <td>30</td>
        </tr>
      </table>


      .diagonal-border-table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #ccc;
      }

      .diagonal-border-table th, .diagonal-border-table td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
        position: relative;
      }

      .diagonal-border-table th::before,
      .diagonal-border-table td::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-top: 2px solid #ccc;
        border-left: 2px solid #ccc;
        transform: rotate(45deg);
        pointer-events: none;
      }

4. طراحی جدول با خطوط متفاوت برای هدر و سلول‌ها

در این مثال، خطوط مرزی مختلفی برای هدر جدول و سلول‌ها استفاده می‌شود:


      <table class="header-border-table">
        <tr>
          <th>نام</th>
          <th>سن</th>
        </tr>
        <tr>
          <td>علی</td>
          <td>25</td>
        </tr>
        <tr>
          <td>مریم</td>
          <td>30</td>
        </tr>
      </table>


      .header-border-table {
        width: 100%;
        border-collapse: collapse;
      }

      .header-border-table th {
        padding: 10px;
        background-color: #f2f2f2;
        border: 2px solid #333;
      }

      .header-border-table td {
        padding: 10px;
        border: 1px solid #ccc;
      }

5. طراحی جدول با خطوط داخلی و خارجی مختلف

در این مثال، از خطوط داخلی و خارجی متفاوت برای جداسازی سلول‌ها استفاده می‌شود:


      <table class="internal-external-borders">
        <tr>
          <th>نام</th>
          <th>سن</th>
        </tr>
        <tr>
          <td>علی</td>
          <td>25</td>
        </tr>
        <tr>
          <td>مریم</td>
          <td>30</td>
        </tr>
      </table>


      .internal-external-borders {
        width: 100%;
        border: 3px solid #2c3e50;
        border-collapse: collapse;
      }

      .internal-external-borders th, .internal-external-borders td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ecf0f1;
      }

      .internal-external-borders th {
        background-color: #34495e;
        color: #fff;
      }

تنظیم فاصله‌ها در جداول

برای بهبود چیدمان جداول و ایجاد فاصله‌های مناسب بین سلول‌ها، می‌توان از خواص padding و border-spacing استفاده کرد. در این بخش به نحوه استفاده از این دو ویژگی برای تنظیم فاصله‌ها در جداول می‌پردازیم.

1. استفاده از padding برای تنظیم فاصله درون سلول‌ها

ویژگی padding به شما این امکان را می‌دهد که فاصله داخل سلول‌ها را تنظیم کنید. این ویژگی برای ایجاد فضای بیشتر درون هر سلول مفید است:


      <table class="padding-table">
        <tr>
          <th>نام</th>
          <th>سن</th>
        </tr>
        <tr>
          <td>علی</td>
          <td>25</td>
        </tr>
        <tr>
          <td>مریم</td>
          <td>30</td>
        </tr>
      </table>


      .padding-table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #ccc;
      }

      .padding-table th, .padding-table td {
        padding: 15px; /* فاصله داخلی سلول‌ها */
        text-align: left;
        border: 1px solid #ddd;
      }

2. استفاده از border-spacing برای تنظیم فاصله بین سلول‌ها

ویژگی border-spacing فاصله بین سلول‌ها را تنظیم می‌کند. این ویژگی زمانی مفید است که بخواهید سلول‌های جدول به‌طور جداگانه از یکدیگر فاصله داشته باشند:


      <table class="spacing-table">
        <tr>
          <th>نام</th>
          <th>سن</th>
        </tr>
        <tr>
          <td>علی</td>
          <td>25</td>
        </tr>
        <tr>
          <td>مریم</td>
          <td>30</td>
        </tr>
      </table>


      .spacing-table {
        width: 100%;
        border-spacing: 10px; /* فاصله بین سلول‌ها */
        border-collapse: separate;
        border: 1px solid #ccc;
      }

      .spacing-table th, .spacing-table td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
      }

3. ترکیب padding و border-spacing

شما می‌توانید همزمان از padding برای تنظیم فاصله درون سلول‌ها و از border-spacing برای تنظیم فاصله بین سلول‌ها استفاده کنید تا به‌طور کامل فاصله‌ها را کنترل کنید:


      <table class="combined-spacing-table">
        <tr>
          <th>نام</th>
          <th>سن</th>
        </tr>
        <tr>
          <td>علی</td>
          <td>25</td>
        </tr>
        <tr>
          <td>مریم</td>
          <td>30</td>
        </tr>
      </table>


      .combined-spacing-table {
        width: 100%;
        border-spacing: 20px; /* فاصله بین سلول‌ها */
        border-collapse: separate;
        border: 2px solid #333;
      }

      .combined-spacing-table th, .combined-spacing-table td {
        padding: 15px; /* فاصله داخلی سلول‌ها */
        text-align: left;
        border: 1px solid #ddd;
      }

4. طراحی جدول با فاصله‌های سفارشی در سلول‌ها

در این مثال، فاصله‌های مختلف برای سلول‌های جدول تنظیم می‌شود:


      <table class="custom-spacing-table">
        <tr>
          <th>نام</th>
          <th>سن</th>
        </tr>
        <tr>
          <td>علی</td>
          <td>25</td>
        </tr>
        <tr>
          <td>مریم</td>
          <td>30</td>
        </tr>
      </table>


      .custom-spacing-table {
        width: 100%;
        border-collapse: collapse;
      }

      .custom-spacing-table th {
        padding: 20px;
        text-align: left;
        background-color: #f2f2f2;
        border: 2px solid #333;
      }

      .custom-spacing-table td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ccc;
      }

افزودن رنگ و استایل به ردیف‌ها

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

1. تغییر رنگ پس‌زمینه ردیف‌ها

با استفاده از ویژگی background-color می‌توانید پس‌زمینه ردیف‌ها را تغییر دهید. در این مثال، ردیف‌های فرد و زوج رنگ‌های متفاوتی دارند:

جدول نمونه:


  <table class="row-styling-table">
    <tr>
      <th>نام</th>
      <th>سن</th>
    </tr>
    <tr>
      <td>علی</td>
      <td>25</td>
    </tr>
    <tr>
      <td>مریم</td>
      <td>30</td>
    </tr>
    <tr>
      <td>رضا</td>
      <td>22</td>
    </tr>
    <tr>
      <td>سمیه</td>
      <td>28</td>
    </tr>
  </table>

2. استفاده از رنگ‌های مختلف برای ردیف‌های فرد و زوج

در این مثال، برای ردیف‌های فرد رنگ پس‌زمینه‌ای متفاوت از ردیف‌های زوج انتخاب می‌شود:


    <style>
      .row-styling-table {
        width: 100%;
        border-collapse: collapse;
      }

      .row-styling-table th,
      .row-styling-table td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
      }

      .row-styling-table tr:nth-child(even) {
        background-color: #f2f2f2;
      }

      .row-styling-table tr:nth-child(odd) {
        background-color: #ffffff;
      }
    </style>

در اینجا از nth-child(even) برای انتخاب ردیف‌های زوج و nth-child(odd) برای انتخاب ردیف‌های فرد استفاده شده است. این تکنیک می‌تواند به بهبود خوانایی جدول کمک کند.

3. تغییر رنگ پس‌زمینه ردیف‌ها هنگام هاور کردن

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

جدول با هاور:


 <table class="row-hover-table">
    <tr>
      <th>نام</th>
      <th>سن</th>
    </tr>
    <tr>
      <td>علی</td>
      <td>25</td>
    </tr>
    <tr>
      <td>مریم</td>
      <td>30</td>
    </tr>
    <tr>
      <td>رضا</td>
      <td>22</td>
    </tr>
    <tr>
      <td>سمیه</td>
      <td>28</td>
    </tr>
  </table>


    <style>
      .row-hover-table {
        width: 100%;
        border-collapse: collapse;
      }

      .row-hover-table th,
      .row-hover-table td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
      }

      .row-hover-table tr:hover {
        background-color: #f0f0f0;
      }
    </style>

با استفاده از :hover در CSS می‌توانید رنگ پس‌زمینه ردیف‌ها را زمانی که موس روی آن‌ها قرار می‌گیرد تغییر دهید.

4. رنگ‌آمیزی سلول‌ها به صورت جداگانه

اگر می‌خواهید رنگ پس‌زمینه سلول‌ها را به صورت جداگانه تغییر دهید، می‌توانید از کلاس‌های مختلف برای سلول‌ها استفاده کنید:

جدول با سلول‌های رنگی:


  <table class="row-cell-coloring-table">
    <tr>
      <th>نام</th>
      <th>سن</th>
    </tr>
    <tr>
      <td class="name-cell">علی</td>
      <td class="age-cell">25</td>
    </tr>
    <tr>
      <td class="name-cell">مریم</td>
      <td class="age-cell">30</td>
    </tr>
    <tr>
      <td class="name-cell">رضا</td>
      <td class="age-cell">22</td>
    </tr>
    <tr>
      <td class="name-cell">سمیه</td>
      <td class="age-cell">28</td>
    </tr>
  </table>


    <style>
      .row-cell-coloring-table {
        width: 100%;
        border-collapse: collapse;
      }

      .row-cell-coloring-table th,
      .row-cell-coloring-table td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
      }

      .row-cell-coloring-table .name-cell {
        background-color: #e6f7ff;
      }

      .row-cell-coloring-table .age-cell {
        background-color: #fff3e6;
      }
    </style>

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

نتیجه‌گیری

در این آموزش، به بررسی روش‌های مختلف استایل‌دهی به لیست‌ها و جداول در CSS پرداخته شد. از شخصی‌سازی نشان‌گرهای لیست‌ها گرفته تا طراحی جداول ریسپانسیو و زیبا، تمام نکات لازم برای بهبود ظاهر و تجربه کاربری این عناصر پوشش داده شد. با استفاده از ویژگی‌های CSS همچون background-color، padding، border-spacing و شبه‌عناصر مانند ::before و ::after، توانستیم جداول و لیست‌های خود را جذاب‌تر و کاربردی‌تر کنیم.

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

قسمت بعدی