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 "
".
## 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:
Look at the example below:<style> .表格{width:宽度值;height:高度值} </style>Copy after loginOutput result:<!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>Copy after loginCopy after login
After setting the height and width by changing the width and height attributes:
Output result:<!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>Copy after loginCopy after login
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:
Let’s take a look at the example below:<table width="宽度值" height="高度值">Copy after login
Output result:<!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>Copy after login
The table size is changed by changing the width and height attributes of the table tag:
Output results:<!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>Copy after loginMore 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
