整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          詳解HTML中表格和表單

          ava程序員學習HTML,表格和表單是用得比較多的,掌握好這2個標簽的詳細用法會對你非常有益!

          一、table表格

          表格由table標簽表示,里面嵌套tr,表示一行,而tr里面嵌套td和th,表示一行有多少列。它們的具體屬性和使用方法如下:

          注意點:table、tr和td都有align屬性,但含義不同。其中table的align表示整個表格居中對齊,而在tr中表示整行中所有的單元格中的內容居中對齊,在td中則表示該單元格中的內容劇中對齊。此外td和th還有跨行和跨列的功能。現在利用這個知識點實現一個具有層次結構的表格:

          代碼:

          <html>

          <head>

          <TITLE>first page!!</title>

          </head>

          <body>

          <table border="1" width="700px" align="center">

          <tr>

          <th>待執行項目</th>

          <th>&nbsp;</th>

          <th>正在執行項目</th>

          </tr>

          <tr>

          <td valign="top">

          <table border="1" width="100%" >

          <tr>

          <th>

          <input type="checkbox" />

          </th>

          <th>項目名</th>

          <th>花費</th>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          </table>

          </td>

          <td align="center">

          <input type="button" value="移入>>" /><br/><br/>

          <input type="button" value="<<移出" />

          </td>

          <td valign="top">

          <table border="1" width="100%">

          <tr>

          <th>

          <input type="checkbox" />

          </th>

          <th>項目名</th>

          <th>花費</th>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          <tr align="center">

          <td>

          <input type="checkbox" />

          </td>

          <td>A</td>

          <td>998.00</td>

          </tr>

          </table>

          </td>

          </tr>

          </table>

          </body>

          </html>

          代碼運行效果:

          二、form表單

          對于javaEE程序員,我們日常輸入用戶名和密碼,然后提交表單,可是對表單總是懵懵懂懂,現在超詳細精煉總結如下,希望可以幫到你!

          希望你照著我給出的模板,每一個都去測試一下,你便會豁然開朗,從此表單提交不再困惑!

          TML 基礎

          非常簡單的HTML文檔

          HTML 標題

          HTML 段落

          HTML 鏈接

          HTML 圖片

          實例解析

          HTML 標題

          HTML 標題

          在html源碼中插入注釋

          插入水平線

          實例解析

          HTML 段落

          HTML 段落

          更多段落

          本例演示在 HTML 文檔中折行的使用。

          HTML 格式化的某些問題。

          實例解析

          HTML 文本格式化

          文本格式化

          此例演示如何使用 pre 標簽對空行和空格進行控制。

          此例演示不同的"計算機輸出"標簽的顯示效果。

          此例演示如何在 HTML 文件中寫地址。

          此例演示如何實現縮寫或首字母縮寫。

          此例演示如何改變文字的方向。

          此例演示如何實現長短不一的引用語。

          文本下劃線與刪除線

          實例解析

          HTML 樣式

          HTML Style 元素

          背景色樣式

          字體樣式,顏色,大小

          文本對齊樣式

          設置文本字體

          設置文本字體大小

          設置文本字體顏色

          設置文本字體,字體大小,字體顏色

          HTML使用不同樣式

          沒有下劃線的鏈接

          鏈接到一個外部樣式表

          實例解析

          HTML 鏈接

          創建超級鏈接

          將圖像作為鏈接

          在新的瀏覽器窗口打開鏈接

          鏈接到同一個頁面的不同位置

          跳出框架

          創建電子郵件鏈接

          創建電子郵件鏈接 2

          實例解析

          HTML 圖像

          插入圖像

          從不同的位置插入圖片

          排列圖片

          本例演示如何使圖片浮動至段落的左邊或右邊。

          制作圖像鏈接

          創建圖像映射

          實例解析

          HTML 表格

          簡單的表格

          沒有邊框的表格

          表格中的表頭

          帶有標題的表格

          跨行或跨列的表格單元格

          表格內的標簽

          單元格邊距(Cell padding)

          單元格間距(Cell spacing)

          實例解析

          HTML 列表

          無序列表

          有序列表

          不同類型的有序列表

          不同類型的無序列表

          嵌套列表

          嵌套列表 2

          定義列表

          實例解析

          HTML Forms 和 Input

          創建文本域(Text fields)

          創建密碼域

          復選框

          單選按鈕

          簡單的下拉列表

          預選下拉列表

          本例演示如何創建一個文本域(多行文本輸入控件)。

          創建一個按鈕

          本例演示如何在數據周圍繪制一個帶標題的框。

          帶有文本域與輸入域的表單

          帶有復選框與提交按鈕的form表單

          帶有單選框與提交按鈕的表單

          發送郵件表單

          實例解析

          HTML iframe

          內聯框架 (HTML頁面中插入框架)

          實例解析

          HTML 頭部元素

          描述了文檔標題

          HTML頁面中默認的URL鏈接

          提供文檔元數據

          實例解析

          HTML 腳本

          插入一個腳本

          使用 <noscript> 標簽

          實例解析

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          嘍大家好,我是作者“未來”,本期分享的內容是Web前端系列課程,本系列總共29個階段,堅持學習3個月蛻變為Web前端高手哦!

          志同道合的小伙伴跟我一起學習交流哦!

          因為在的編輯中“<”和“>”中的內容都會被識別為代碼,顯示不出來內容,所以,在文本中會省略“<”和“>”,圖片中的“<”和“>”不會省略。

          第一階段 01 HTML5

          07表格

          1 表格table(會使用)

          在HTML網頁中,要想創建表格,就需要使用表格相關的標簽。創建表格的基本語法格式如下:

          2 表格的注意事項

          1 tr和 /tr中只能嵌套td和/td標簽

          2 td和/td標簽,他就像一個容器,可以容納所有的元素

          3 表格屬性

          使用方法:

          4 表頭標簽

          只需用表頭標記th和/th替代相應的單元格標記td和/td即可。

          顯示效果為加粗和居中。

          5 表格結構(了解)

          在使用表格進行布局時,可以將表格劃分為頭部、主體和頁腳(頁腳因為有兼容性問題,我們不在贅述),具體如下所示:

          1 thead和/ thead:用于定義表格的頭部。

          2 必須位于table和/ table標簽中,一般包含網頁的logo和導航等頭部信息

          3 tbody和/ tbody:用于定義表格的主體。

          4 位于

          標簽中,一般包含網頁中除頭部和底部之外的其他內容。

          6 瀏覽器審查HTML標簽元素

          瀏覽器頁面按F12打開

          左邊顯示為HTML,右邊顯示為CSS(后面會學到)

          7 表格標題標簽

          表格的標題:caption

          caption元素定義表格標題。

          caption標簽必須緊隨table標簽之后。只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。

          8 合并單元格

          跨行合并:rowspan

          跨列合并:colspan

          “2”表示合并兩個單元格,數值是多少就合并多少個單元格。

          看不懂的小伙伴不要氣餒,后續的分享中將持續解釋,只要你跟著我分享的課程從頭到尾去學習,每篇文章看三遍,一個月后,回過頭來看之前的文章就會感覺簡單極了。

          本章已結束,下篇文章將分享《08 表單和表單控件》小伙伴們不要錯過喲!上述內容是作者本人的學習筆記,需要原視頻學習資料可以在公眾號回復關鍵詞“前端資料”


          主站蜘蛛池模板: 成人无码精品一区二区三区| 精品福利一区二区三| 亚洲国产成人久久一区久久| 国产精品视频免费一区二区| 在线播放精品一区二区啪视频| 欧美亚洲精品一区二区| 亚洲AV香蕉一区区二区三区 | 日韩视频一区二区在线观看| 国内精自品线一区91| 国产精品日韩一区二区三区| 国产91精品一区二区麻豆亚洲 | 日韩精品无码一区二区三区不卡| 色偷偷久久一区二区三区| 亚洲AV无码一区二区三区网址| 国产免费私拍一区二区三区| 国产免费一区二区三区不卡| 天堂资源中文最新版在线一区| 亚洲一区AV无码少妇电影| 夜夜爽一区二区三区精品| 无码人妻精品一区二区三区东京热| 在线精品国产一区二区三区| 国产一区二区三区不卡在线看| 丝袜美腿高跟呻吟高潮一区| 亚洲乱码一区二区三区在线观看 | 福利一区福利二区| 国产一区二区三区不卡观| 亚洲av日韩综合一区二区三区| 日韩精品一区二区三区视频| 色欲综合一区二区三区| 日本一区二区在线免费观看| 精品无码AV一区二区三区不卡 | 午夜一区二区免费视频| 国产亚洲日韩一区二区三区| 国产精品无码一区二区三区不卡| 中文字幕亚洲一区| 国产免费私拍一区二区三区| 久久久精品人妻一区亚美研究所 | 久久91精品国产一区二区| 色一情一乱一伦一区二区三区| 国产一区二区三区夜色| 亚洲日本va一区二区三区 |