Bagaimana untuk menetapkan saiz jadual dalam html-html tutorial-php.cn

Bagaimana untuk menetapkan saiz jadual dalam html

WBOY

Lepaskan： 2021-11-11 15:19:35

asal

36117 orang telah melayarinya

Cara menetapkan saiz jadual dalam HTML: 1. Tambahkan gaya "lebar: nilai lebar; ketinggian: nilai ketinggian;" 2. Gunakan atribut lebar dan ketinggian teg jadual, sintaks "".

Bagaimana untuk menetapkan saiz jadual dalam html

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk menetapkan saiz jadual dalam html

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>

Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk menetapkan saiz jadual dalam html

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="高度值">

Salin selepas log masuk

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>

Salin selepas log masuk

Hasil output:

Bagaimana untuk menetapkan saiz jadual dalam html

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>

Salin selepas log masuk

Hasil output:
Bagaimana untuk menetapkan saiz jadual dalam html

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!