"."/> ".">
search

Home  >  Article  >  Web Front-end  >  How to set table size in html

How to set table size in html

WBOY
WBOYOriginal
2021-11-11 15:19:3536153browse

htmlHow to set the table size: 1. Add the "width: width value; height: height value;" style to the table element; 2. Use the width and height attributes of the table tag, the syntax "

".

How to set table size in html

## The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer .

htmlHow to set the table size:

1. Add height and height styles to the table

We can define and set the width by adding the width style to the table, and set the table height through the height style.


The code is as follows: 

<style>
.表格{width:宽度值;height:高度值}
</style>

Look at the example below: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>button</title>
    <style>
.td{width:200px;height:200px}
</style>
</head>
<body>
<table style="border: 1px solid black" >
<tr>
<td class="td" style="border: 1px solid black" >1</td>
<td class="td" style="border: 1px solid black" >2</td>
<td class="td" style="border: 1px solid black" >3</td>
<td class="td" style="border: 1px solid black" >4</td>
</tr>
<table>
</body>
</html>

Output result:


How to set table size in html

After setting the height and width by changing the width and height attributes: 


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>button</title>
    <style>
.td{width:200px;height:200px}
</style>
</head>
<body>
<table style="border: 1px solid black" >
<tr>
<td class="td" style="border: 1px solid black" >1</td>
<td class="td" style="border: 1px solid black" >2</td>
<td class="td" style="border: 1px solid black" >3</td>
<td class="td" style="border: 1px solid black" >4</td>
</tr>
<table>
</body>
</html>

Output result:


How to set table size in html

2, Define the table width through the table tag

through the width attribute in the table tag, and define the table height through the height attribute.

The code is as follows: 


<table width="宽度值" height="高度值">

Let’s take a look at the example below: 


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>button</title>
</head>
<body>
<table style="border: 1px solid black" width="400" height="100">
<tr>
<td style="border: 1px solid black" >1</td>
<td style="border: 1px solid black" >2</td>
<td style="border: 1px solid black" >3</td>
<td style="border: 1px solid black" >4</td>
</tr>
<table>
</body>
</html>

Output result:


How to set table size in html

The table size is changed by changing the width and height attributes of the table tag: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>button</title>
</head>
<body>
<table style="border: 1px solid black" width="40" height="10">
<tr>
<td style="border: 1px solid black" >1</td>
<td style="border: 1px solid black" >2</td>
<td style="border: 1px solid black" >3</td>
<td style="border: 1px solid black" >4</td>
</tr>
<table>
</body>
</html>

Output results:


How to set table size in html

More programming related knowledge, Please visit:

programming video! !

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

html5 css3 html table
Statement：
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
Previous article：How to write button in htmlNext article：How to write button in html

Related articles

See more