Comment définir la taille du tableau en HTML-tutoriel HTML-php.cn

Comment définir la taille du tableau en HTML

WBOY

Libérer： 2021-11-11 15:19:35

original

36187 Les gens l'ont consulté

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">".

Comment définir la taille du tableau en HTML

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>

Copier après la connexion

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>

Copier après la connexion

Résultat de sortie :

Comment définir la taille du tableau en HTML

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>

Copier après la connexion

Résultat de sortie :

Comment définir la taille du tableau en HTML

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

Copier après la connexion

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>

Copier après la connexion

Résultat de sortie :

Comment définir la taille du tableau en HTML

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>

Copier après la connexion

Résultat de sortie :
Comment définir la taille du tableau en HTML