Μέγεθος πίνακα CSS (πλάτος και ύψος)

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Πλάτος και ύψος τραπεζιού

Το πλάτος και το ύψος ενός πίνακα ορίζονται από τις ιδιότητες πλάτος και ύψος.

Το παρακάτω παράδειγμα ορίζει το πλάτος του πίνακα στο 100%, και το ύψος του <th> στοιχεία σε 70 εικονοστοιχεία:

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>