Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan saiz jadual dalam html
Bagaimana untuk menetapkan saiz jadual dalam html
- WBOYasal
- 2021-11-11 15:19:3536154semak imbas
Cara menetapkan saiz jadual dalam HTML: 1. Tambahkan gaya "lebar: nilai lebar; ketinggian: nilai ketinggian;" 2. Gunakan atribut lebar dan ketinggian teg jadual, sintaks "
".
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Cara menetapkan saiz jadual dalam html:
1. Tambahkan gaya ketinggian dan ketinggian pada jadual
Kita boleh menentukan dan menetapkan lebar dengan menambahkan gaya lebar pada jadual, dan menetapkan ketinggian meja dengan menambah gaya ketinggian.
Kodnya adalah seperti berikut:
<style>
.表格{width:宽度值;height:高度值}
</style>Lihat contoh di bawah:
<!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>Hasil keluaran:
Selepas menetapkan ketinggian dan lebar dengan menukar sifat lebar dan ketinggian:
<!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>Hasil keluaran:
2 Gunakan teg jadual
untuk mentakrifkan lebar jadual melalui atribut lebar dalam teg jadual, dan ketinggian jadual melalui atribut ketinggian. .
Kodnya adalah seperti berikut:
<table width="宽度值" height="高度值">
Mari kita lihat contoh di bawah:
<!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>Hasil output:
Berikut menukar saiz jadual dengan menukar atribut lebar dan ketinggian teg jadual:
<!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>Hasil output: 
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !
Atas ialah kandungan terperinci Bagaimana untuk menetapkan saiz jadual dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!