cari
Rumahhujung hadapan webhtml tutorialHTML表格与列表_html/css_WEB-ITnose
HTML表格与列表_html/css_WEB-ITnose
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
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>

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

 与

没有边框的表格

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

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

 

 


表格中的表头

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

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

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

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


带有标题的表格

我是表头
标签， 标签也是在 

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

 

表格内的颜色bgcolor属性

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


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

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

 

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

 

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>

         

        有序列表

               

          、

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

           

          嵌套列表

                 

            、
            、

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

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

             

            自定义列表

                   

            、
            、

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

            <!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>        <dl>            <li>我是标题</li>            <dt>                <dd>我是正文，我必须长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</dd>            </dt>        </dl>                </body></html>
      Kenyataan
      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
      Artikel Berkaitan
      Apakah tujuan & lt; kemajuan & gt; unsur?Apakah tujuan & lt; kemajuan & gt; unsur?Mar 21, 2025 pm 12:34 PM

      Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

      Apakah tujuan & lt; DATALIST & GT; unsur?Apakah tujuan & lt; DATALIST & GT; unsur?Mar 21, 2025 pm 12:33 PM

      Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

      Apakah tujuan & lt; meter & gt; unsur?Apakah tujuan & lt; meter & gt; unsur?Mar 21, 2025 pm 12:35 PM

      Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

      Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?Mar 20, 2025 pm 05:56 PM

      Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

      Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?Mar 17, 2025 pm 12:27 PM

      Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

      Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik?Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik?Mar 12, 2025 pm 04:05 PM

      Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

      Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?Mar 20, 2025 pm 06:05 PM

      Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

      Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?Mar 17, 2025 pm 12:20 PM

      Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

      See all articles

      Alat AI Hot

      Undresser.AI Undress

      Undresser.AI Undress

      Apl berkuasa AI untuk mencipta foto bogel yang realistik

      AI Clothes Remover

      AI Clothes Remover

      Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

      Undress AI Tool

      Undress AI Tool

      Gambar buka pakaian secara percuma

      Clothoff.io

      Clothoff.io

      Penyingkiran pakaian AI

      AI Hentai Generator

      AI Hentai Generator

      Menjana ai hentai secara percuma.

      Tunjukkan Lagi

      Artikel Panas

      R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
      3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
      R.E.P.O. Tetapan grafik terbaik
      3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
      Assassin's Creed Shadows: Penyelesaian Riddle Seashell
      1 minggu yang laluByDDD
      R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
      3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
      Di mana untuk mencari kad kunci kawalan kren di atomfall
      1 minggu yang laluByDDD
      Tunjukkan Lagi

      Alat panas

      mPDF

      mPDF

      mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

      SublimeText3 versi Cina

      SublimeText3 versi Cina

      Versi Cina, sangat mudah digunakan

      Dreamweaver Mac版

      Dreamweaver Mac版

      Alat pembangunan web visual

      EditPlus versi Cina retak

      EditPlus versi Cina retak

      Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

      Pelayar Peperiksaan Selamat

      Pelayar Peperiksaan Selamat

      Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

      Tunjukkan Lagi

      Topik panas

      Di manakah pintu masuk log masuk untuk e-mel gmail?
      7433
      15
      Tutorial CakePHP
      1359
      52
      Apakah format nama akaun stim
      76
      11
      kunci pengaktifan win11 kekal
      29
      19
      Tunjukkan Lagi