(ﻉﺎﻔﺗﺭﺍ ﻭ ﺽﺮﻋ) CSS ﻝﻭﺪﺟ ﻩﺯﺍﺪﻧﺍ

فهرست مطالب

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

ﺰﯿﻣ ﻉﺎﻔﺗﺭﺍ ﻭ ﺽﺮﻋ

.ﺩﻮﺷ ﯽﻣ ﻒﯾﺮﻌﺗ height ﻭ Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 Joe Swanson $300

ﻝﺎﺜﻣ

table 
{
  width: 100%;
}

th
{
  height: 70px;
}

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

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

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

th {
  height: 70px;
}
</style>
</head>
<body>

<h2>The width and height Properties</h2>

<p>Set the width of the table, and the height of the table header row:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ width: 50% ﺯﺍ ،ﺩﻮﺷ ﻞﻣﺎﺷ ﺍﺭ ﻪﺤﻔﺻ

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

ﻝﺎﺜﻣ

table 
{
  width: 50%;
}

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

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

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

<h2>A table that only span half the page</h2>

<p>Set the width of the table to 50%:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>