CSS ﻞﯾﺎﺘﺳﺍ ﻝﻭﺍﺪﺟ

فهرست مطالب

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

:ﺪﯿﺸﺨﺑ ﺩﻮﺒﻬﺑ ﯼﺩﺎﯾﺯ ﺪﺣ ﺎﺗ CSS ﺎﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ HTML ﻝﻭﺪﺟ ﮏﯾ ﺮﻫﺎﻇ

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

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

<!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>

ﻝﻭﺪﺟ ﻪﯿﺷﺎﺣ

.ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ border ﯽﮔﮋﯾﻭ ﺯﺍ ،CSS ﺭﺩ ﻝﻭﺪﺟ ﯼﺎ

:ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ <td> ﻭ <table>، <th> ﺮﺻﺎﻨﻋ ﯼﺍﺮﺑ ﺪﻣﺎﺟ ﻪﯿﺷﺎﺣ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ

Firstname Lastname
Peter Griffin
Lois Griffin

ﻝﺎﺜﻣ

table, th, td {
  border: 1px solid;
}

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

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

<h2>Add a border to a table:</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

ﻞﻣﺎﮐ ﺽﺮﻋ ﺎﺑ HTML ﻝﻭﺪﺟ

.ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﻝﻭﺪﺟ ﻪﺑ ﺍﺭ width: 100% ،(ﻞﻣﺎﮐ ﺽﺮﻋ

Firstname Lastname
Peter Griffin
Lois Griffin

ﻝﺎﺜﻣ

table {
    width: 100%;
}

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

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

table {
  width: 100%;
}
</style>
</head>
<body>

<h2>Full-width Table</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

ﻪﻧﺎﮔﻭﺩ ﯼﺎﻫﺯﺮﻣ

ﺖﺴﻫ ﻦﯾﺍ .ﺖﺳﺍ ﻪﻧﺎﮔﻭﺩ ﯼﺎﻫ ﻪﯿﺷﺎﺣ ﯼﺍﺭﺍﺩ ﻻﺎﺑ ﯼﺎﻫ ﻝﺎﺜﻣ ﺭﺩ ﻝﻭﺪﺟ ﻪﮐ ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻪﺟﻮﺗ

.ﺪﯿﻨﮐ ﻩﺎﮕﻧ ﺮﯾﺯ ﻝﺎﺜﻣ ﻪﺑ ،ﻪﯿﺷﺎﺣ ﻭﺩ ﻑﺬﺣ ﯼﺍﺮﺑ

ﻝﻭﺪﺟ ﯼﺎﻫ ﻪﯿﺷﺎﺣ ﻥﺩﺮﮐ ﮏﭼﻮﮐ

ﻝﻭﺪﺟ ﻪﯿﺷﺎﺣ ﺎﯾﺁ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﻦﯿﯿﻌﺗ border-collapse

Firstname Lastname
Peter Griffin
Lois Griffin

ﻝﺎﺜﻣ

table
{
  border-collapse: collapse;
}

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

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

table {
  width: 100%;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Let the table borders collapse</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

.ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﻥﺁ ﯼﺍﺮﺑ ﺍﺭ border ﯽﮔﮋﯾﻭ ﻂﻘﻓ ،ﺪﯿﻫﺍﻮ

Firstname Lastname
Peter Griffin
Lois Griffin

ﻝﺎﺜﻣ

table
{
  border: 1px solid;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border: 1px solid;
}
</style>
</head>
<body>

<h2>Single Border Around The Table</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>