How to set table width in HTML?-HTML Tutorial-php.cn

How to set table width in HTML?

王林

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

forward

2403 people have browsed it

How to set table width in HTML?

We use inline style attributes to set the width of the table in HTML. This attribute is used within the HTML

tag, and uses the CSS attribute width to set the width of the table.

grammar

The following is the syntax for setting table width in HTML.

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

Copy after login

The Chinese translation of

Example

is:

Example

The following is a sample program to set the table width in 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>

Copy after login

In the above example, we used width=50%, which will expand our table to 50% of the browser tab size on the web page.

The Chinese translation of

Example

is:

Example

Here is another example program for setting table width in 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>

Copy after login

Now we try to use the style attribute to expand the table to the browser tab size.

The Chinese translation of

Example

is:

Example

The following is a sample program that uses the style attribute to expand a table to the size of a browser tab.

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

Copy after login

The above is the detailed content of How to set table width in HTML?. For more information, please follow other related articles on the PHP Chinese website!