HTML表格与列表_html/css_WEB-ITnose-tutoriel HTML-php.cn

Table des matières

HTML表格

HTML列表

Maison

interface Web

tutoriel HTML

HTML表格与列表_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:50 AM

HTML表格

表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些很多行列组成的东西，就叫表格，表格是

标签来定义的。而

标签中的行就是标签，而列就是

标签，必须先定义行才能定义列。因为html中，每一列是在一行当中的。

下表总结了一些常用的标签：

反正写了。会出现一个很细小的表格，但是中写的文字，是不会显示上去的

所以html中，编写表格是要一行一行的写。

标签中包含

表格

描述


定义表格

定义表格标题
		定义表格的表头

定义表格的行
		定义表格的单元

定义表格的页眉

定义表格的主体

定义表格的页脚

定义表格的列属性

先定义一个简单的表：

运行后可以看到

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>        <table border="1">            <tr>                <td>水果</td>                <td>水果</td>                <td>水果</td>            </tr>    <!-- 下面将td与tr反正写了，是不会构成表的 -->            <td>                <tr>asd</tr>                <tr>asd</tr>                <tr>asd</tr>                <tr>asd</tr>            </td>        </table>    </body></html>

Copier après la connexion

可以看到，上面注释下面的

与

没有边框的表格

没有边框的表格，其实就是在

标签中，不加属性border。border这个属性是代表表格的边框。如果不加属性的话，默认border="0" ，但是没有边框有的时候你就看不出来它是一张表格了。所以有的时候会给border="1px"设置1像素的边框。暂时去掉border属性，完成一张没有边框的表格

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>        <table>            <tr>                <td>呵呵</td>                <td>哈哈</td>                <td>嘻嘻</td>            </tr>            <tr>                <td>嘿嘿</td>                <td>嘎嘎</td>                <td>噗噗</td>            </tr>            <tr>                <td>啊啊</td>                <td>哦哦</td>                <td>噢噢</td>            </tr>        </table>    </body></html>

Copier après la connexion

表格中的表头

还可以给表添加表头，使用

标签中的，我们为了好看，还是把border加上：

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>        <table border="1">            <tr>                <th>人物</th>                <th>介绍</th>                <th>产品</th>            </tr>            <tr>                <td>史蒂夫&middot;保罗&middot;乔布斯</td>                <td>苹果CEO</td>                <td>Apple系列</td>            </tr>            <tr>                <td>丹尼斯&middot;里奇</td>                <td>C语言之父</td>                <td>C语言</td>            </tr>            <tr>                <td>比尔&middot;盖茨</td>                <td>微软CEO</td>                <td>Windows系统</td>            </tr>        </table>    </body></html>

Copier après la connexion

还可以设置表格内的边距 cellpadding 属性
也可以设置单元格边距 cellspacing 属性

<table border="1" cellpadding="10" cellspacing="10">    <tr>        <td>xxx</td>    </tr></table>

Copier après la connexion

带有标题的表格

我是表头

标签，

标签也是在

<table border="1" cellpadding="10" cellspacing="10">            <caption>xxx表</caption>            <tr>                <td>xxx</td>            </tr></table>

Copier après la connexion

表格内的颜色bgcolor属性

<table border="1" bgcolor="red">    <tr>        <td>xxx</td>    </tr></table>

Copier après la connexion

单元格内容排列 align 属性分别有center、left、right

<table border="1" align="center">    <caption>xxx表</caption>    <tr>        <td>xxx</td>    </tr></table>

Copier après la connexion

跨行和跨列的单元格 colspan属性，准确的来说，就是合并单元格

<table border="1">    <caption>xxx表</caption>    <tr>        <td colspan="2">xxx</td>        <td>xxx</td>    </tr>    <tr>        <td>xxx</td>        <td>xxx</td>        <td>xxx</td>    </tr></table>

Copier après la connexion

HTML列表

列表就是像word里面的标题一样，顺着往下数的标题。

下标是一些控制标题的标签

标签	描述
	有序列表
	无序列表
	列表项
	列表
	列表项
	描述

这些列表还分有序列表，无序列表和自定义列表。

无序列表

属性：disc：实体圆、circle：空心圆、square：实体方块

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>    <!-- 无序列表默认属性是disc，disc定义一个实体圆，所以disc不用刻意去设置 -->        <ul>            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ul>    <!-- 这些属性都是通过type来定义的，circle是定义一个空心圆 -->        <ul type="circle">            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ul>    <!-- square定义实体方块 -->        <ul type="square">            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ul>    </body></html>

Copier après la connexion

有序列表

属性：A、a、l、i、start

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>    <!-- 有序列表默认是数字往下计数的 -->        <ol>            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ol>    <!-- 定义A，就是按照大写字母来计数的，当然了，不能直接定义B，它不是不会从B开始数的 -->        <ol type="A">            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ol>    <!-- 定义a，就是安装小写字母开始计数的 -->        <ol type="a">            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ol>    <!-- 定义I，就是按照大写罗马数字计数的 -->        <ol type="I">            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ol>    <!-- 定义i，就是按照大写罗马数字计数的 -->        <ol type="i">            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ol>    <!-- start属性，就是按照从多少数来计数，比如我想从3开始计数。start属性只能定义数字，不支持英文字母哦。 -->        <ol start="3">            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ol>    </body></html>

Copier après la connexion

嵌套列表

嵌套列表就是有序列表套无序列表，无序套有序的呗。

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>        <ol>            <li>人物</li>            <ul>                <li>斯蒂芬&middot;保罗&middot;乔布斯</li>                <li>丹尼斯&middot;里奇</li>                <li>比尔&middot;盖茨</li>            </ul>                        <li>动物</li>            <ul>                <li>猫</li>                <li>狗</li>                <li>熊</li>            </ul>        </ol>                </body></html>

Copier après la connexion

自定义列表

、

自定义的列表，就是没有有序、无序的点。后期可以用CSS样式来加工修改。也是比较常用的操作

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>        <dl>            <li>我是标题</li>            <dt>                <dd>我是正文，我必须长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</dd>            </dt>        </dl>                </body></html>

Copier après la connexion

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

3 Il y a quelques semaines By DDD

Économie dans R.E.P.O. Expliqué (et enregistrer des fichiers)

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - Comment trouver le forgeron et déverrouiller les armes et la personnalisation des armes

4 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7569

Tutoriel CakePHP

1386

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

107

Afficher plus

Related knowledge

Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

See all articles