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

Jadual Kandungan

HTML表格

HTML列表

Rumah

hujung hadapan web

html tutorial

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>

Salin selepas log masuk

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

与

没有边框的表格

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

标签中，不加属性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>

Salin selepas log masuk

表格中的表头

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

标签中的，我们为了好看，还是把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>

Salin selepas log masuk

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

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

Salin selepas log masuk

带有标题的表格

我是表头

标签，

标签也是在

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

Salin selepas log masuk

表格内的颜色bgcolor属性

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

Salin selepas log masuk

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

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

Salin selepas log masuk

跨行和跨列的单元格 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>

Salin selepas log masuk

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>

Salin selepas log masuk

有序列表

属性：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>

Salin selepas log masuk

嵌套列表

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

<!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>

Salin selepas log masuk

自定义列表

、

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

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

Salin selepas log masuk

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

4 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

3 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

4 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

1 bulan yang lalu By DDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

1 bulan yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7695

Tutorial Java

1640

Tutorial CakePHP

1393

Tutorial Laravel

1287

Tutorial PHP

1229

Tunjukkan Lagi

Related knowledge

Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Apr 04, 2025 pm 11:30 PM

Algoritma Adaptif Kedudukan Y-Axis untuk Fungsi Anotasi Web Artikel ini akan meneroka cara melaksanakan fungsi anotasi yang serupa dengan dokumen perkataan, terutama bagaimana menangani selang antara anotasi ...

GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? Apr 04, 2025 pm 11:54 PM

Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...

HTML, CSS, dan JavaScript: Alat penting untuk pemaju web Apr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Apr 05, 2025 am 06:15 AM

Untuk mencapai kesan penyebaran dan membesarkan imej sekitarnya selepas mengklik pada imej, banyak reka bentuk web perlu mencapai kesan interaktif: klik pada imej tertentu untuk membuat sekitar ...

See all articles