ﻝﻭﺍﺪﺟ :5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ

فهرست مطالب

    نمایش فهرست مطالب

HTML ﻪﯾﺎﭘ ﻝﻭﺪﺟ

.ﺖﺳﺍ ﯽﻘﻓﺍ ﯼﺎﻫ ﻩﺪﻨﻨﮐ ﻢﯿﺴﻘﺗ ﻭ ﮏﺒﺳ ﮏﺘﺸﻟﺎﺑ ﮏﯾ ﯼﺍﺭﺍﺩ 5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ ﻪﯾﺎﭘ ﺰﯿﻣ ﮏﯾ

:ﺪﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﻝﻭﺪﺟ ﻪﺑ ﺍﺭ ﻪﯿﻟﻭﺍ ﻞﯾﺎﺘﺳﺍ .table

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

ﻩﺍﺭ ﻩﺍﺭ ﯼﺎﻫ ﻒﯾﺩﺭ

:ﺪﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﻝﻭﺪﺟ ﻪﺑ ﺍﺭ ﺍﺮﺑﺯ ﯼﺎﻫﺭﺍﻮﻧ .table-striped

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Striped Rows</h2>
  <p>The .table-striped class adds zebra-stripes to a table:</p>            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

ﺭﺍﺩ ﻪﯿﺷﺎﺣ HTML ﻝﻭﺪﺟ

:ﺪﻨﮐﯽﻣ ﻪﻓﺎﺿﺍ ﺎﻫﻝﻮﻠﺳ ﻭ ﻝﻭﺪﺟ ﯼﺎﻫﻑﺮﻃ ﻪﻤﻫ ﺭﺩ ﺍﺭ ﯽﯾﺎﻫﻪﯿﺷﺎﺣ

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Bordered Table</h2>
  <p>The .table-bordered class adds borders on all sides of the table and the cells:</p>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

ﺪﯾﺭﺍﺩ ﻪﮕﻧ ﺍﺭ HTML ﻝﻭﺪﺟ ﯼﺎﻫ ﻒﯾﺩﺭ

:ﺪﻨﮐﯽﻣ ﻪﻓﺎﺿﺍ ﻝﻭﺪﺟ ﯼﺎﻫﻒﯾﺩﺭ ﯼﻭﺭ (ﯼﺮﺘﺴﮐﺎﺧ ﻪﻨﯿﻣﺯﺲﭘ ﮓﻧﺭ) ﺭﻭﺎﻨﺷ ﺖﮑﻓﺍ

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Hover Rows</h2>
  <p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>            
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

ﮏﯾﺭﺎﺗ/ﻩﺎﯿﺳ HTML ﻝﻭﺪﺟ

:ﺪﻨﮐﯽﻣ ﻪﻓﺎﺿﺍ ﻝﻭﺪﺟ ﻪﺑ ﻩﺎﯿﺳ ﻪﻨﯿﻣﺯﺲﭘ ﮏﯾ .tabl

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Black/Dark Table</h2>
  <p>The .table-dark class adds a black background to the table:</p>            
  <table class="table table-dark">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

ﻩﺮﯿﺗ ﻩﺍﺭ ﻩﺍﺭ HTML ﻝﻭﺪﺟ

.table-dark ﻭ .tabl

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Dark Striped Table</h2>
  <p>Combine .table-dark and .table-striped to create a dark, striped table:</p>            
  <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

ﺭﻭﺎﻨﺷ ﻞﺑﺎﻗ ﮏﯾﺭﺎﺗ HTML ﻝﻭﺪﺟ

:ﺪﻨﮐﯽﻣ ﻪﻓﺎﺿﺍ ﻝﻭﺪﺟ ﯼﺎﻫﻒﯾﺩﺭ ﯼﻭﺭ (ﯼﺮﺘﺴﮐﺎﺧ ﻪﻨﯿﻣﺯﺲﭘ ﮓﻧﺭ) ﺭﻭﺎﻨﺷ ﺖﮑﻓﺍ

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Hoverable Dark Table</h2>
  <p>The .table-hover class adds a hover effect (grey background color) on table rows:</p>            
  <table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

ﻪﯿﺷﺎﺣ ﻥﻭﺪﺑ HTML ﻝﻭﺪﺟ

:ﺪﻨﮐ ﯽﻣ ﻑﺬﺣ ﻝﻭﺪﺟ ﺯﺍ ﺍﺭ ﺎﻫﺯﺮﻣ .table-borderless

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Borderless Table</h2>
  <p>The .table-borderless class removes borders from the table:</p>            
  <table class="table table-borderless">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

HTML ﻝﻭﺪﺟ ﯽﻨﺘﻣ ﯼﺎﻫ ﺱﻼﮐ

.(<td>) ﻝﻭﺪﺟ ﯼﺎﻫ ﻝﻮﻠﺳ ﺎﯾ (< .ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ code

ﻝﺎﺜﻣ

Default Defaultson def@somemail.com
Primary Joe joe@example.com
Success Doe john@example.com
Danger Moe mary@example.com
Info Dooley july@example.com
Warning Refs bo@example.com
Active Activeson act@example.com
Secondary Secondson sec@example.com
Light Angie angie@example.com
Dark Bo bo@example.com

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Contextual Classes</h2>
  <p>Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:</p>
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>Secondson</td>
        <td>sec@example.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>Angie</td>
        <td>angie@example.com</td>
      </tr>
      <tr class="table-dark">
        <td>Dark</td>
        <td>Bo</td>
        <td>bo@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

:ﺯﺍ ﺪﻨﺗﺭﺎﺒﻋ ﻩﺩﺎﻔﺘﺳﺍ ﻞﺑﺎﻗ ﯽﻨﺘﻣ ﯼﺎﻫ ﺱﻼﮐ

.table-primary

ﺖﺳﺍ ﻢﻬﻣ ﻞﻤﻋ ﮏﯾ ﻩﺪﻨﻫﺩ ﻥﺎﺸﻧ :ﯽﺑﺁ

.table-success

ﺖﺳﺍ ﺖﺒﺜﻣ ﺎﯾ ﻖﻓﻮﻣ ﻡﺍﺪﻗﺍ ﮏﯾ ﻩﺪﻨﻫﺩ ﻥﺎﺸﻧ :ﺰﺒﺳ

.table-danger

ﺖﺳﺍ ﯽﻔﻨﻣ ﻩﻮﻘﻟﺎﺑ ﺎﯾ ﮎﺎﻧﺮﻄﺧ ﻞﻤﻋ ﮏﯾ ﻩﺪﻨﻫﺩ ﻥﺎﺸﻧ :ﺰﻣﺮﻗ

.table-info

ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﯽﺜﻨﺧ ﻩﺪﻧﺯﻮﻣﺁ ﻡﺍﺪﻗﺍ ﺎﯾ ﺮﯿﯿﻐﺗ ﮏﯾ :ﻦﺷﻭﺭ ﯽﺑﺁ

.table-warning

ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻪﺟﻮﺗ ﻪﺑ ﺯﺎﯿﻧ ﺖﺳﺍ ﻦﮑﻤﻣ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﯼﺭﺍﺪﺸﻫ :ﯽﺠﻧﺭﺎﻧ

.table-active

ﺪﻨﮐ ﯽﻣ ﻝﺎﻤﻋﺍ ﻝﻭﺪﺟ ﻝﻮﻠﺳ ﺎﯾ ﻝﻭﺪﺟ ﻒﯾﺩﺭ ﯼﻭﺭ ﺍﺭ ﺭﻭﺎﻨﺷ ﮓﻧﺭ :ﯼﺮﺘﺴﮐﺎﺧ

.table-secondary

ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﻢﻬﻣ ﺮﺘﻤﮐ ﯽﻤﮐ ﻞﻤﻋ ﮏﯾ :ﯼﺮﺘﺴﮐﺎﺧ

.table-light

ﻦﺷﻭﺭ ﯼﺮﺘﺴﮐﺎﺧ ﻝﻭﺪﺟ ﻒﯾﺩﺭ ﺎﯾ ﺰﯿﻣ ﻪﻨﯿﻣﺯ ﺲﭘ

.table-dark

ﻝﻭﺪﺟ ﻒﯾﺩﺭ ﺎﯾ ﻩﺮﯿﺗ ﯼﺮﺘﺴﮐﺎﺧ ﺰﯿﻣ ﻪﻨﯿﻣﺯ ﺲﭘ

HTML ﻝﻭﺪﺟ ﺮﺳ ﯼﺎﻫ ﮓﻧﺭ

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﻝﻭﺪﺟ ﺭﺪﻫ ﻪﺑ ﻪﻨﯿﻣﺯﺲﭘ ﮓﻧﺭ ﮏﯾ ﻂﻘﻓ ﺎﺗ ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﯽﻨﺘﻣ ﯼﺎﻫﺱ

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Table Head Colors</h2>
  <p>You can use any of the contextual classes to only add a color to the table header:</p>
  <table class="table">
    <thead class="table-dark">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  <table class="table">
    <thead class="table-success">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

HTML ﮏﭼﻮﮐ ﻝﻭﺪﺟ

:ﺪﻨﮐ ﯽﻣ ﺮﺘﮑﭼﻮﮐ ﺍﺭ ﻝﻭﺪﺟ ،ﯽﻟﻮﻠﺳ ﻪﯾﻻ ﻥﺩﺮﮐ ﻒﺼﻧ ﺎﺑ .table

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Small Table</h2>
  <p>The .table-sm class makes the table smaller by cutting cell padding in half:</p>
  <table class="table table-bordered table-sm">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

ﻮﮕﺨﺳﺎﭘ HTML ﻝﻭﺍﺪﺟ

:(ﺪﺷﺎﺑ ﮒﺭﺰﺑ ﯽﻠﯿﺧ ﯽﻘﻓﺍ ﺕﺭﻮﺻ ﻪﺑ ﻪﮐ ﯽﻧﺎﻣﺯ) ﺪﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﻝﻭﺪﺟ ﻪﺑ ﺯﺎﯿﻧ ﺕﺭﻮﺻ ﺭﺩ ﺍﺭ ﺶ

ﻝﺎﺜﻣ

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Responsive Table</h2>
  <p>The .table-responsive class adds a scrollbar to the table when needed:</p>
  
  <div class="table-responsive">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
          <th>City</th>
          <th>Country</th>
          <th>Sex</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

</body>
</html>

:ﺪﻨﮐ ﺖﻓﺎﯾﺭﺩ ﺶﯾﺎﻤﯿﭘ ﺭﺍﻮﻧ ﮏﯾ ﯽﻧﺎﻣﺯ ﻪﭼ ﻝﻭﺪﺟ ﻪﮐ ﺪﯾﺮﯿﮕﺑ ﻢﯿﻤﺼﺗ ،ﺶﯾﺎﻤﻧ ﻪﺤﻔﺻ ﺽﺮﻋ ﻪﺑ ﻪﺘ

Class Screen width
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

ﻝﺎﺜﻣ

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Responsive Table</h2>
  <p>The .table-responsive-sm class creates a responsive table which will scroll horizontally on screens that are less than 576px wide.</p>                                                                                      
  <p>Resize the browser window to see the effect.</p>
  <div class="table-responsive-sm">          
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
        <th>Sex</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

</body>
</html>

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024