Bagaimana untuk menetapkan lebar jadual dalam HTML?-html tutorial-php.cn

Bagaimana untuk menetapkan lebar jadual dalam HTML?

王林

Lepaskan： 2023-09-06 23:37:03

ke hadapan

2366 orang telah melayarinya

Bagaimana untuk menetapkan lebar jadual dalam HTML?

Kami menggunakan atribut gaya sebaris untuk menetapkan lebar jadual dalam HTML. Atribut ini digunakan dalam teg

HTML dan menggunakan lebar atribut CSS untuk menetapkan lebar jadual.

Tatabahasa

Berikut ialah sintaks untuk menetapkan lebar jadual dalam HTML.

<table style="width: width value in percentage">… </table>

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Berikut ialah contoh program untuk menetapkan lebar jadual dalam HTML.

<!DOCTYPE html>
<html>
   <style>
      table {
         border:1px solid black;
         padding: 10px;
      }
      th, td{
         border:1px solid black;
         padding: 20px;
      }
      </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 50%">
      <tr>
         <th>Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
   </table>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami menggunakan width=50%, yang akan mengembangkan jadual kami kepada 50% daripada saiz tab penyemak imbas pada halaman web.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Berikut ialah satu lagi contoh program untuk menetapkan lebar jadual dalam HTML.

<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td {
         border: 1px solid green;
      }
   </style>
</head>
<body>
   <table style="width:100%">
      <caption>Cricketers...</caption>
      <tr style="background-color: Mediumseagreen">
         <th>S.no</th>
         <th>Name</th>
         <th>Age</th>
         <th>Country</th>
      </tr>
      <tr>
         <td>1</td>
         <td>babar azam</td>
         <td>34</td>
         <td>pakistan</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Shami</td>
         <td>29</td>
         <td>India</td>
      </tr>
      <tr style="background-color: Mediumseagreen">
         <td>3</td>
         <td>Cummins</td>
         <td>33</td>
         <td>Australia</td>
      </tr>
   </table>
</body>
</html>

Salin selepas log masuk

Kini kami cuba menggunakan atribut gaya untuk mengembangkan jadual kepada saiz tab penyemak imbas.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Berikut ialah contoh program yang menggunakan atribut gaya untuk mengembangkan jadual kepada saiz tab penyemak imbas.

<!DOCTYPE html>
<html>
   <style>
      table {
         border:1px solid black;
         padding: 10px;
      }
      th, td{
         border:1px solid black;
         padding: 20px;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th>Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
   </table>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menetapkan lebar jadual dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!