CSS ﻮﮕﺨﺳﺎﭘ ﻝﻭﺪﺟ

فهرست مطالب

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

ﻮﮕﺨﺳﺎﭘ ﻝﻭﺪﺟ

:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﯽﻘﻓﺍ ﻝﻭﺮﮑﺳﺍ ﺭﺍﻮﻧ ﮏﯾ ﻮﮕﺨﺳﺎﭘ ﻝﻭﺪﺟ ﮏﯾ ،ﺪﺷﺎﺑ ﮏﭼﻮﮐ ﯽﻠﯿﺧ ﻞﻣﺎﮐ ﯼﺍﻮﺘﺤﻣ

First Name Last Name Points Points Points Points Points Points Points Points Points Points Points Points
Jill Smith 50 50 50 50 50 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67 67 67

:ﺪﺷﺎﺑ ﻮﮕﺨﺳﺎﭘ ﺎﺗ ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ <table> ﺮﺼﻨﻋ ﻑﺍﺮﻃﺍ ﺭﺩ ove

ﻝﺎﺜﻣ

<div style="overflow-x:auto;">
<table>
... table content ...
</table>

</div>

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

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h2>Responsive Table</h2>
<p>A responsive table will display a horizontal scroll bar if the screen is too 
small to display the full content. Resize the browser window to see the effect:</p>
<p>To create a responsive table, add a container element (like div) with <strong>overflow-x:auto</strong> around the table element:</p>

<div style="overflow-x: auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

</body>
</html>

ﻪﺟﻮﺗ: ﺭﺩ OS X Lion (ﺭﺩ Mac)، ﺶﯿﭘ ﺭﻮﻃ ﻪﺑ ﺶﯾﺎﻤﯿﭘ ﯼﺎﻫﺭﺍﻮﻧﯽﻣ

ﺮﺘﺸﯿﺑ ﯼﺎﻫ ﻪﻧﻮﻤﻧ

.ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﯼﺰﺘﻧﺎﻓ ﻝﻭﺪﺟ ﮏﯾ ﺩﺎﺠﯾﺍ ﻩﻮﺤﻧ ﻝﺎﺜﻣ ﻦﯾﺍ

ﺪﯿﻨﮐ ﺖﺳﺭﺩ ﮏﯿﺷ ﺰﯿﻣ ﮏﯾ

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
</style>
</head>
<body>

<h1>A Fancy Table</h1>

<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbk�p</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>K�niglich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris sp�cialit�s</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</table>

</body>
</html>

.ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﻝﻭﺪﺟ ﻥﺍﻮﻨﻋ ﻥﺩﺍﺩ ﺭﺍﺮﻗ ﻩﻮﺤﻧ ﻝﺎﺜﻣ ﻦﯾﺍ

ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﻝﻭﺪﺟ ﻥﺍﻮﻨﻋ ﺖﯿﻌﻗﻮﻣ

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

caption {
  caption-side: bottom;
}
</style>
</head>
<body>

<table>
<caption>Table 1.1 Customers</caption>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr class="alt">
    <td>Berglunds snabbk�p</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr class="alt">
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
</table>

</body>
</html>

CSS ﻝﻭﺪﺟ ﯼﺎﻫ ﯽﮔﮋﯾﻭ

border

ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﻥﻼﻋﺍ ﮏﯾ ﺭﺩ ﺍﺭ ﻪﯿﺷﺎﺣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ

border-collapse

ﺮﯿﺧ ﺎﯾ ﺪﻧﻮﺷ ﻊﻤﺟ ﺪﯾﺎﺑ ﻝﻭﺪﺟ ﯼﺎﻫ ﻪﯿﺷﺎﺣ ﺎﯾﺁ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ

border-spacing

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺭﻭﺎﺠﻣ ﯼﺎﻫ ﻝﻮﻠﺳ ﯼﺎﻫﺯﺮﻣ ﻦﯿﺑ ﻪﻠﺻﺎﻓ

caption-side

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻝﻭﺪﺟ ﻥﺍﻮﻨﻋ ﯼﺮﯿﮔﺭﺍﺮﻗ ﻞﺤﻣ

empty-cells

ﺮﯿﺧ ﺎﯾ ﺩﻮﺷ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ ﻝﻭﺪﺟ ﯽﻟﺎﺧ ﯼﺎﻫ ﻝﻮﻠﺳ ﺭﺩ ﻪﻨﯿﻣﺯ ﺲﭘ ﻭ ﺎﻫ ﻪﯿﺷﺎﺣ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ

table-layout

ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﻝﻭﺪﺟ ﯼﺍﺮﺑ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺍﺮﺑ ﺍﺭ ﯼﺪﻨﺑ ﺡﺮﻃ ﻢﺘﯾﺭﻮﮕﻟﺍ