Maison > Article > interface Web > Comment définir la taille du tableau en HTML
Comment définir la taille du tableau en HTML
- WBOYoriginal
- 2021-11-11 15:19:3536162parcourir
Comment définir la taille du tableau en HTML : 1. Ajoutez le style "width: width value; height: height value;" à l'élément tableau ; 2. Utilisez les attributs width et height de la balise table, la syntaxe "< ;largeur de la table="valeur de largeur "hauteur="valeur de hauteur">".
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Comment définir la taille du tableau en HTML :
1. Ajoutez des styles de hauteur et de hauteur au tableau
Nous pouvons définir et définir la largeur en ajoutant le style de largeur au tableau et en définissant la taille. hauteur de la table grâce au style de hauteur.
Le code est le suivant :
<style>
.表格{width:宽度值;height:高度值}
</style>Regardez l'exemple ci-dessous :
<!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>Résultat de sortie :
Après avoir défini la hauteur et la largeur en modifiant les propriétés de largeur et de hauteur :
<!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>Résultat de sortie :
2. Définissez la largeur du tableau via la balise table
via l'attribut width dans la balise table, et définissez la hauteur du tableau via l'attribut height.
Le code est le suivant :
<table width="宽度值" height="高度值">
Regardons-le à travers un exemple :
<!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>Résultat de sortie :
Ce qui suit modifie la taille du tableau en modifiant les attributs de largeur et de hauteur du balise de table :
<!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>Résultat de sortie : 
Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!