Home > Article > Web Front-end > How to set table size in html
How to set table size in html
- WBOYOriginal
- 2021-11-11 15:19:3536078browse
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:
<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:
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:
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:
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: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!
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