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

Table of Contents

grammar

Example

Tables in HTML

Home

Web Front-end

HTML Tutorial

How to set table width in HTML?

王林

Sep 06, 2023 pm 11:37 PM

html sheet width

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 id="Tables-in-HTML">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 id="Tables-in-HTML">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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn