html如何創(chuàng)建表格

這篇文章給大家分享的是有關(guān)html如何創(chuàng)建表格的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

html創(chuàng)建表格的方法：首先使用“<table>” 標(biāo)簽定義表格框架；然后使用一個(gè)或多個(gè)“<tr>”標(biāo)簽定義表格中的行，一個(gè)或多個(gè)“<td>”標(biāo)簽定義單元格；最后在td標(biāo)簽對(duì)中填入表格數(shù)據(jù)（單元格內(nèi)容）即可，數(shù)據(jù)可以是文本、圖片等信息。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

表格由 <table> 標(biāo)簽來(lái)定義。

每個(gè)表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。

字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

border屬性指定有無(wú)邊框，不寫border屬性或者賦值為0，創(chuàng)建的表格都將沒(méi)有邊框;賦值的大小決定了邊框的粗細(xì)。

th屬性設(shè)置表頭，如果不把表頭特殊設(shè)置，那么顯示出來(lái)的表頭會(huì)和內(nèi)容一樣的格式。

下面通過(guò)代碼示例來(lái)給大家一步步介紹：

1、下面寫兩個(gè)簡(jiǎn)單的沒(méi)有邊框的表格

<h6>第一個(gè)表格</h6>
 
<table border="0"> <!------------把border賦值為0，這個(gè)表格沒(méi)有邊框-->
<tr>
<th>name</th>    <!-------------------利用 <th>將這個(gè)值設(shè)置為表頭-->
<th>sex</th>     <!-------------------利用 <th>將這個(gè)值設(shè)置為表頭-->
</tr>
<!-----------------------------------這是第一行-->
 <tr>
<td>張三</td>
<td>女</td>
</tr>
 </table>
<!----------------------------------這是第二行-->

<h6>第二個(gè)表格</h6>   
<table>           <!------------不寫border這個(gè)屬性，這個(gè)表格也沒(méi)有邊框-->
<tr>
<th>name</th>     <!-------------------利用 <th>將這個(gè)值設(shè)置為表頭-->
<th>sex</th>     <!-------------------利用 <th>將這個(gè)值設(shè)置為表頭-->
</tr>
<!-----------------------------------上面這是第一行<tr>-->
<tr> 
<td>張三</td>
<td>女</td>
</tr> 
 <!------------------------------第二行-->
</table>

效果：

2、寫一個(gè)有邊框的表格（border的賦值決定了邊框的粗細(xì)）

給表格設(shè)置標(biāo)題，用<caption>。

假如表格中有空值，那么在這個(gè)單元格里插入一個(gè)空格占位符“&nbsp;"，可以讓單元格保持完整。

<h6>第三個(gè)表格</h6>
<caption>人員信息表</caption> <!---------------------給表格設(shè)置一個(gè)標(biāo)題-->
 
<table border="1">   <!---------------------border="1",表格有邊框-->
<tr>
<th>name</th>
<th>sex</th>
</tr>
<tr>
<td>張三</td>
<td>女</td>
</tr>
<tr>
<td>&nbsp;</td>    <!----------------這個(gè)單元格沒(méi)有值，放一個(gè)空格占位符 &nbsp; 在這里-->
<td>unknown</td>
</tr>
</table>

效果：

3、下面設(shè)置一個(gè)橫向跨列和一個(gè)縱向跨行的表格

某一個(gè)單元格橫跨兩列，使用 colspan="2"來(lái)設(shè)置，數(shù)字代表跨的列

<table border="1">
<tr>
<th>姓名</th>
<th colspan="3">成績(jī)</th>         <!-------------橫向跨列，3表示跨了3列-->
</tr>
<tr>
<td>張丹</td>                    <!--------------這是第一列---姓名-->
<td>98</td>                     <!--------------這是第二列---成績(jī)1-->
<td>56</td>                     <!----------------這是第三列---成績(jī)2-->
<td>87</td>                     <!--------------這是第四列---成績(jī)3-->
</tr>
</table>

效果：

某一個(gè)單元格縱跨兩行，使用  rowspan="2"來(lái)設(shè)置，數(shù)字代表跨的行

<table border="1">
<tr>
<th>姓名</th>
<th colspan="3">成績(jī)</th>         <!-------------橫向跨列，3表示跨了3列-->
</tr>
<tr>
<td>張丹</td>                    <!--------------這是第一列---姓名-->
<td>98</td>                     <!--------------這是第二列---成績(jī)1-->
<td>56</td>                     <!----------------這是第三列---成績(jī)2-->
<td>87</td>                     <!--------------這是第四列---成績(jī)3-->
</tr>
</table>

效果：

4、HTML的各項(xiàng)標(biāo)簽可以隨意嵌套。

4.1在單元格里嵌套列表

<table border="2">
<tr>
<td>房間里包含的水果
<li>香蕉</li>
<li>葡萄</li>
<li>番茄</li>
</td>
</tr>
</table>

效果：

4.2在單元格里嵌套單元格

<table border="2">
<tr>
<td>
<p>我要做的事</p>
//-------------------------
<table border="1">
<tr>
<th rowspan="3">周一</th>
<td>做PPT</td>
</tr>
<tr>
<td>開(kāi)會(huì)</td>
</tr>
<tr>
<td>寫報(bào)告</td>
</tr>
</table>
//---------------------中間是一個(gè)完整的單元格
</td>
</tr>
</table>

效果：

5、更改表格樣式

5.1單元格樣式之----單元格邊距，保證內(nèi)容與邊框的距離

<table border="2" cellpadding="10">  //----------使用cellpadding來(lái)設(shè)置單元格邊距
<tr>
<td>
<p>我要做的事</p>
<table border="1" cellpadding="5">  //----------使用cellpadding來(lái)設(shè)置單元格邊距
<tr>
<th rowspan="3">周一</th>
<td>做PPT</td>
</tr>
<tr>
<td>開(kāi)會(huì)</td>
</tr>
<tr>
<td>寫報(bào)告</td>
</tr>
</table>
</td>
</tr>
</table>

效果：

5.2單元格樣式之----給表格添加背景顏色或圖片（顏色用bgcolor；圖片用background）

<table border="2" cellpadding="10" bgcolor="yellow">  <!----------使用bgcolor來(lái)設(shè)置背景顏色為黃色-->
<tr>
<td>
<p>我要做的事</p>
<table border="1" cellpadding="5"  
background="http://images.missyuan.com/attachments
/day_080420/20080420_ba6f1b3324576143d62brfIPM291T4da.jpg"> <!---------使用background來(lái)設(shè)置背景圖片-->
<tr>
<th rowspan="3">周一</th>
<td>做PPT</td>
</tr>
<tr>
<td>開(kāi)會(huì)</td>
</tr>
<tr>
<td>寫報(bào)告</td>
</tr>
</table>
</td>
</tr>
</table>

效果：

5.3給某一個(gè)單元格單獨(dú)設(shè)置背景

<table border="2" cellpadding="10" bgcolor="yellow">  <!----------使用bgcolor來(lái)設(shè)置表格背景顏色為黃色-->
<tr>
<td>
<p>我要做的事</p>
<table border="1" cellpadding="5"> 
<tr>
<th  bgcolor="white" rowspan="3">周一</th>  <!--給標(biāo)題這一個(gè)單元格設(shè)置背景顏色-->
<td>做PPT</td>
</tr>
<tr>
<td>開(kāi)會(huì)</td>
</tr>
<tr>
<td background="http://images.missyuan.com/attachments
/day_080420/20080420_ba6f1b3324576143d62brfIPM291T4da.jpg">寫報(bào)告</td>   
           <!---------使用background來(lái)設(shè)置單元格背景圖片-->
</tr>
</table>
</td>
</tr>
</table>

效果：

5.4在表格中排列內(nèi)容--讓表格更好看(align)

<table width="400" border="1">
<tr>
<th align="left">電表名稱</th>
<th align="center">Ua(V)</th>
<th align="center">Ub(V)</th>
<th align="center">Uc(V)</th>
</tr>
<tr>
<td align="left">2018-6-19 00:00</td>
<td align="right">232.2</td>
<td align="right">239.0</td>
<td align="right">231.8</td>
</tr>
<tr>
<td align="left">2018-6-19 05:00</td>
<td align="right">232.6</td>
<td align="right">233.2</td>
<td align="right">234.3</td>
</tr>
<tr>
<td align="left">2018-6-19 10:00</td>
<td align="right">232.6</td>
<td align="right">232.2</td>
<td align="right">234.6</td>
</tr>
</table>

效果：

上面這些功能，可以根據(jù)實(shí)際情況隨意嵌套，如同搭積木一樣，大家可以根據(jù)自己喜好利用這些功能寫出炫酷的表格！

感謝各位的閱讀！關(guān)于“html如何創(chuàng)建表格”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！