使用HTML添加表格1（基本元素）-零基礎(chǔ)自學(xué)網(wǎng)頁制作

格元素詳解與練習(xí)

提到表格，大家最先想到的就是EXCEL這款軟件，實際上在對表格的操作上，HTML與EXCEL非常相似。

在展示數(shù)據(jù)，統(tǒng)計數(shù)據(jù)方面，表格比文字描述更具表達(dá)優(yōu)勢，在網(wǎng)頁中，表格也經(jīng)常被用來展示數(shù)據(jù)、計劃日常安排等內(nèi)容。如圖所示：

今天我們就來學(xué)習(xí)一下如何向頁面中添加表格元素。

首先來介紹一下表格元素中的基本標(biāo)簽。

NO.1：<table></table>

這個標(biāo)簽是書寫表格的第一個標(biāo)簽，它本身在頁面上看不出什么內(nèi)容，但是它的屬性可以控制表格顯示的全局樣式。這個標(biāo)簽的開始標(biāo)簽寫在表格元素的開頭，結(jié)尾標(biāo)簽寫在表格元素的結(jié)尾。

NO.2：<caption></caption>

這個標(biāo)簽是表格的標(biāo)題標(biāo)簽。

NO.3：<tr></tr>

這個標(biāo)簽定義表格的列標(biāo)簽。

NO.4：<th></th>

這個標(biāo)簽是列表標(biāo)題標(biāo)簽，例如，男生、女士、姓名等。

NO.5：<td></td>

這個標(biāo)簽定義表格的行標(biāo)簽。

OK，這些基本標(biāo)簽就可以構(gòu)建一個基礎(chǔ)的表格元素。示例代碼如下：

頁面效果如圖所示：沒有表格的外邊框。

如何添加外邊框呢？在<table>標(biāo)簽中修改border屬性即可，示例代碼如下：border="1"是給表格添加寬為1的邊界線。

<table border = "1"><!-- border="1"是給表格添加寬為1的邊界線 -->

效果如圖所示：

這時，您會發(fā)現(xiàn)表格在頁面上的尺寸非常小，可不可以按照頁面尺寸來顯示表格嗎？當(dāng)然可以，這就需要為<table>標(biāo)簽修改第二個屬性width，示例代碼如圖所示：width = "100%"指的是表格寬度與平面寬度一致。

<table border = "1" width = "100%"><!-- width = "100%"指的是表格寬度與平面寬度一致 -->

效果如圖所示：

ok！今天的講解先到這里，明天我會繼續(xù)為大家講解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三個標(biāo)簽，以及合并單元格操作。

今天的完整代碼示例如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
</head> 
<body><h1>第一個網(wǎng)頁</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
  <caption>表格標(biāo)題</caption>
<tr>
  <th>姓名</th>
<th>年齡</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
  <td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body> 
</html>

正所謂萬丈高樓平地起，html技術(shù)雖然簡單，但是內(nèi)容相對繁瑣，也是以后進(jìn)一步學(xué)習(xí)網(wǎng)頁制作的基礎(chǔ)，希望大家動手寫每一段代碼，把每一步踩堅實。

喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

TML:完成頁面的內(nèi)容展示

CSS：完成頁面樣式的控制，美化頁面，完成頁面的布局。

表單：用于采集用戶輸入的數(shù)據(jù)。用于和服務(wù)器進(jìn)行交互。

form:用于定義表單的。可以定義一個范圍(代表用戶采集數(shù)據(jù)的范圍)

屬性：action:指定提交數(shù)據(jù)的url(指的就是把數(shù)據(jù)提交到哪里)

method:指定提交方式

分類：一共有7種，2種比較常用。

get:1.請求參數(shù)會在地址欄顯示

2.請求參數(shù)的長度是有限制的。

3.請求不安全

post:1.請求參數(shù)不會在地址欄顯示，會封裝在請求體中。

2.請求參數(shù)的長度沒有限制

3.較為安全

表單里面的數(shù)據(jù)要想被提交，必須指定它的name屬性

表單項標(biāo)簽

input:可以通過type屬性值，改變元素展示的樣式。

type屬性：text:文本輸入框，默認(rèn)值

placeholder:指定輸入框的提示信息，當(dāng)輸入框的內(nèi)容發(fā)生變化，會自動情況提示信息。

password:密碼輸入框

radio：1.單選框(要想讓多個單選框?qū)崿F(xiàn)單選的效果，則多個單選框的name屬性值必須一樣)

2.一般會給每一個單選框提供value屬性，指定其被選中后提交的值。

3.checked屬性可以指定默認(rèn)值

checkbox:復(fù)選框:

1.一般會給每一個單選框提供value屬性，指定其被選中后提交的值。

2.checked屬性可以指定默認(rèn)值

file:文件選擇框

hidden:隱藏域，用于提交一些信息

按鈕:

submit:提交按鈕。可以提交表單

button:普通按鈕

image:圖片提交按鈕

src屬性指定圖片的路徑

label:指定輸入項的文字描述信息

注意：lable的for屬性一般會和input的id屬性值對應(yīng)。如果對應(yīng)了，點擊lable區(qū)域，會讓input輸入框獲取焦點。

select:下拉列表

子元素：option,指定列表項

textarea:文本域

TML 是用來描述網(wǎng)頁的一種語言。

HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)
標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

HTML5 是最新的 HTML 標(biāo)準(zhǔn)。

HTML5 是專門為承載豐富的 web 內(nèi)容而設(shè)計的，并且無需額外插件。
HTML5 擁有新的語義、圖形以及多媒體元素。
HTML5 提供的新元素和新的 API 簡化了 web 應(yīng)用程序的搭建。
HTML5 是跨平臺的，被設(shè)計為在不同類型的硬件（PC、平板、手機、電視機等等）之上運行。

CSS 是一種描述 HTML 文檔樣式的語言。

CSS 描述應(yīng)該如何顯示 HTML 元素。
CSS 用于控制網(wǎng)頁的樣式和布局。
CSS3 是最新的 CSS 標(biāo)準(zhǔn)。
CSS3 被拆分為"模塊"。主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現(xiàn)透明效果、漸變效果、使用@Font-Face實現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動）、多欄布局、媒體查詢等。

1 標(biāo)注效果

要實現(xiàn)如下效果：

HTML5:

<ruby>
少<rt>shào</rt>小<rt>xiǎo</rt>離<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
</ruby>，
<ruby>
鄉(xiāng)<rt>xiāng</rt>音<rt>yīn</rt>無<rt>wú</rt>改<rt>gǎi</rt>鬢<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt>
</ruby>。

2 與文本換行相關(guān)的屬性

	使用說明
line-break	用于指定如何（或是否）斷行。除了Firefox，其它瀏覽器都支持。取值包括： auto，使用缺省的斷行規(guī)則分解文本； loose，使用最松散的斷行規(guī)則分解文本，一般用于短行的情況，如報紙； normal，使用最一般的斷行規(guī)則分解文本； strict，使用最嚴(yán)格的斷行原則分解文本。
word-wrap	允許長單詞或URL地址換行到下一行。所有瀏覽器都支持。取值包括： normal，只在允許的斷字點換行（瀏覽器保持默認(rèn)處理）； break-word，在長單詞或 URL 地址內(nèi)部進(jìn)行換行。
word-break	定義文本自動換行。Chrome和Safari瀏覽器支持不夠友好。取值包括： normal：為默認(rèn)值，允許在字內(nèi)換行; keep-all,對于中文、韓文、日文，不允許字?jǐn)嚅_； break-all，與normal相同，允許非亞洲語言文本行的任意字內(nèi)斷開。
white-space	設(shè)置如何處理元素中的空格。所有瀏覽器都支持。取值包括： normal，默認(rèn)處理方式； pre，顯示預(yù)先格式化的文本，當(dāng)文字超出邊界時不換行； nowrap，強制在同一行內(nèi)顯示所有文本，合并文本間的多余空白，直到文本結(jié)束或者遭遇br對象； pre-wrap，顯示預(yù)先格式化的文本，不合并文字間的空白距離，當(dāng)文字碰到邊界時發(fā)生換行； pre-line，保持文本的換行，不保留文字間的空白距離，當(dāng)文字碰到邊界時發(fā)生換行。

3 text-shadow

要實現(xiàn)的效果：

CSS3：

p {
    text-align: center;
    font: bold 60px helvetica, arial, sans-serif;
    color: #fff;
    text-shadow: black 0.1em 0.1em 0.2em;
}

要實現(xiàn)的效果：

CSS3：

p {
    text-align: center;
    font:bold 60px helvetica, arial, sans-serif;
    color: red;
    text-shadow: 0 0 4px white, 
        0 -5px 4px #ff3, 
        2px -10px 6px #fd3, 
        -2px -15px 11px #f80, 
        2px -25px 18px #f20;
}

要實現(xiàn)的效果：

CSS3：

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: -1px -1px white,  
        1px 1px #333;
}

要實現(xiàn)的效果：

CSS3：

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: 1px 1px white,  
        -1px -1px #333;
}

4 border的transparent屬性

要實現(xiàn)的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

要實現(xiàn)的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

要實現(xiàn)的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

要實現(xiàn)的效果：

CSS3：

#demo {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;

}

5 transform: rotate

要實現(xiàn)的效果：

CSS3和HTML5：

<style type="text/css">
.bubble {
    width: 200px; /*定義框大小，可忽略，讓消息框自由收縮*/
    height: 50px;
    background:hsla(93,96%,62%,1); /*定義背景色，必須與下面箭頭背景色一致*/
    padding: 12px;  /*增加補白，防止消息文本跑到框外*/
    position: relative; /*定義定位包含框，方便定位箭頭*/
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;   /*圓角*/
}
.bubble:before { 
    content: "";   /*不顯示任何內(nèi)容*/
    width: 0;  /*定義箭頭內(nèi)容區(qū)大小*/
    height: 0;
    position: absolute;  /*絕對定位*/
    z-index:-1;  /*顯示在消息框下面*/
}
.bubble.bubble-left:before {
    right: 90%;
    top: 50%;
    
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    transform: rotate(-25deg);  /*定位箭頭傾斜角度*/
    /*定義箭頭長短、粗細(xì)*/
    border-top: 20px  solid transparent;
    border-right: 80px  solid hsla(93,96%,62%,1);
    border-bottom: 20px  solid transparent;

}

div {
    margin:50px;
}

<div class="bubble bubble-left">左側(cè)消息提示框<br>class="bubble bubble-left"</div>

6 background: repeating-linear-gradient

要實現(xiàn)的效果：

CSS3：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
    background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
    background-size: 100% 30px;
    position: relative;
}
body:before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 4px;
    border-left: 4px double #FCA1A1;
    position: absolute;
    left: 30px;
}

需要實現(xiàn)的效果：

CSS3：

.box {
    background: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px);
    color: #fff;
    padding: 12px 24px;
}

7 實現(xiàn)選項卡效果

<script>
function setTab(cursel,n){
	    for(i=1;i<=n;i++){
	        	var menu=document.getElementById("tab_"+i);
	        	var con=document.getElementById("con_"+i);
	        	menu.className=i==cursel?"hover":"";
	        	con.style.display=i==cursel?"block":"none";
	    }
}
</script>

<div id="tab">
    <div class="Menubox">
        <ul>
            <li id="tab_1" class="hover" onclick="setTab(1,4)">明星</li>
            <li id="tab_2" onclick="setTab(2,4)">搞笑</li>
            <li id="tab_3" onclick="setTab(3,4)">美女</li>
            <li id="tab_4" onclick="setTab(4,4)">攝影</li>
        </ul>
    </div>
    <div class="Contentbox">
        <div id="con_1" class="hover" ><img src="images/1.png" /></div>
        <div id="con_2" class="hide"><img src="images/2.png" /></div>
        <div id="con_3" class="hide"><img src="images/3.png" /></div>
        <div id="con_4" class="hide"><img src="images/4.png" /></div>
    </div>
</div>
</body>

8 表格隔行添加背景色

CSS3：

tbody tr:nth-child(2n) {
    background-color: #f5fafe;
}

9 border-radius

圓角表格的CSS3：

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

10 border-spacing

單線表格的CSS3：

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
}

11 box-shadow

設(shè)計圖片翹邊陰影效果：

CSS3：

.box {
    width: 980px;
    clear: both;
    overflow: hidden;
    height: auto;
    margin: 20px auto;
}
.box li {
    background: #fff;
    float: left;
    position: relative;
    margin: 20px 10px;
    border: 2px solid #efefef;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
}
.box li img {
    width: 290px;
    height: 200px;
    margin: 5px;
}
.box li:before {
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    left: 21px;
    background: transparent;  /*透明背景*/
    z-index: -2;   /*顯示在照片的下面*/
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);  /*添加陰影*/
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(-12deg) rotate(-6deg);   /*變形并旋轉(zhuǎn)陰影，讓其翹起*/
    -webkit-transform: skew(-12deg) rotate(-6deg);
    -moz-transform: skew(-12deg) rotate(-6deg);
    -os-transform: skew(-12deg) rotate(-6deg);
    -o-transform: skew(-12deg) rotate(-6deg);
}
.box li:after { /*在左側(cè)添加翹邊陰影*/
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    right: 21px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(12deg) rotate(6deg);
    -webkit-transform: skew(12deg) rotate(6deg);
    -moz-transform: skew(12deg) rotate(6deg);
    -os-transform: skew(12deg) rotate(6deg);
    -o-transform: skew(12deg) rotate(6deg);
}

<ul class="box">
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
</ul>

ref

《HTML5+CSS3+JavaScript從入門到精通（實例版）》

-End-

在線咨詢

上一篇：JavaScript 中問號的三種用法 ??和?.以及?: 的您知道嗎？
下一篇：html基礎(chǔ)（一）

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

使用HTML添加表格1（基本元素）-零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML完整學(xué)習(xí)目錄

1 標(biāo)注效果

2 與文本換行相關(guān)的屬性

3 text-shadow

4 border的transparent屬性

5 transform: rotate

6 background: repeating-linear-gradient

7 實現(xiàn)選項卡效果

8 表格隔行添加背景色

9 border-radius

10 border-spacing

11 box-shadow

您的項目需求