搜尋
首頁web前端html教學HTML表格与列表_html/css_WEB-ITnose

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>

      陳述
      本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
      HTML作為標記語言:其功能和目的HTML作為標記語言:其功能和目的Apr 22, 2025 am 12:02 AM

      HTML的功能是定義網頁的結構和內容,其目的在於提供一種標準化的方式來展示信息。 1)HTML通過標籤和屬性組織網頁的各個部分,如標題和段落。 2)它支持內容與表現分離,提升維護效率。 3)HTML具有可擴展性,允許自定義標籤增強SEO。

      HTML,CSS和JavaScript的未來:網絡開發趨勢HTML,CSS和JavaScript的未來:網絡開發趨勢Apr 19, 2025 am 12:02 AM

      HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

      HTML:結構,CSS:樣式,JavaScript:行為HTML:結構,CSS:樣式,JavaScript:行為Apr 18, 2025 am 12:09 AM

      HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

      HTML的未來:網絡設計的發展和趨勢HTML的未來:網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

      HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

      HTML與CSS vs. JavaScript:比較概述HTML與CSS vs. JavaScript:比較概述Apr 16, 2025 am 12:04 AM

      HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

      HTML:是編程語言還是其他?HTML:是編程語言還是其他?Apr 15, 2025 am 12:13 AM

      HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

      HTML:建立網頁的結構HTML:建立網頁的結構Apr 14, 2025 am 12:14 AM

      HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

      從文本到網站:HTML的力量從文本到網站:HTML的力量Apr 13, 2025 am 12:07 AM

      HTML是一種用於構建網頁的語言,通過標籤和屬性定義網頁結構和內容。 1)HTML通過標籤組織文檔結構,如、。 2)瀏覽器解析HTML構建DOM並渲染網頁。 3)HTML5的新特性如、、增強了多媒體功能。 4)常見錯誤包括標籤未閉合和屬性值未加引號。 5)優化建議包括使用語義化標籤和減少文件大小。

      See all articles

      熱AI工具

      Undresser.AI Undress

      Undresser.AI Undress

      人工智慧驅動的應用程序,用於創建逼真的裸體照片

      AI Clothes Remover

      AI Clothes Remover

      用於從照片中去除衣服的線上人工智慧工具。

      Undress AI Tool

      Undress AI Tool

      免費脫衣圖片

      Clothoff.io

      Clothoff.io

      AI脫衣器

      Video Face Swap

      Video Face Swap

      使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

      熱工具

      Atom編輯器mac版下載

      Atom編輯器mac版下載

      最受歡迎的的開源編輯器

      SublimeText3 Linux新版

      SublimeText3 Linux新版

      SublimeText3 Linux最新版

      mPDF

      mPDF

      mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

      禪工作室 13.0.1

      禪工作室 13.0.1

      強大的PHP整合開發環境

      SecLists

      SecLists

      SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。