html建立表格的方法：首先使用「
」 標籤定義表格框架；然後使用一個或多個「
」標籤定義表格中的行，一個或多個「< ;td>」標籤定義儲存格；最後在td標籤對中填入表格資料（儲存格內容）即可，資料可以是文字、圖片等資訊。
本教學操作環境：windows7系統、HTML5版、Dell G3電腦。
表格由
標籤來定義。
每個表格都有若干行（由
標籤定義），每行被分割為若干單元格（由 標籤定義）。 字母 td 指表格資料（table data），即資料單元格的內容。資料儲存格可以包含文字、圖片、清單、段落、表單、水平線、表格等等。
border屬性指定有無邊框，不寫border屬性或賦值為0，建立的表格都將沒有邊框;賦值的大小決定了邊框的粗細。
th屬性設定表頭，如果不把表頭特殊設置，那麼顯示出來的表頭會和內容一樣的格式。
下面透過程式碼範例來跟大家一步步介紹：
1、下面寫兩個簡單的沒有邊框的表格
<h5>第一个表格</h5> <table border="0"> <!------------把border赋值为0，这个表格没有边框--> <tr> <th>name</th> <!-------------------利用 <th>将这个值设置为表头--> <th>sex</th> <!-------------------利用 <th>将这个值设置为表头--> </tr> <!-----------------------------------这是第一行--> <tr> <td>张三</td> <td>女</td> </tr> </table> <!----------------------------------这是第二行-->登入後複製<h5>第二个表格</h5> <table> <!------------不写border这个属性，这个表格也没有边框--> <tr> <th>name</th> <!-------------------利用 <th>将这个值设置为表头--> <th>sex</th> <!-------------------利用 <th>将这个值设置为表头--> </tr> <!-----------------------------------上面这是第一行<tr>--> <tr> <td>张三</td> <td>女</td> </tr> <!------------------------------第二行--> </table>登入後複製效果：
2、寫一個有邊框的表格（border的賦值決定了邊框的粗細）
為表格設定標題，用
。 假如表格中有空值，那麼在這個單元格里插入一個空格佔位符“ "，可以讓單元格保持完整。
<h5>第三个表格</h5> <caption>人员信息表</caption> <!---------------------给表格设置一个标题--> <table border="1"> <!---------------------border="1",表格有边框--> <tr> <th>name</th> <th>sex</th> </tr> <tr> <td>张三</td> <td>女</td> </tr> <tr> <td> </td> <!----------------这个单元格没有值，放一个空格占位符 在这里--> <td>unknown</td> </tr> </table>登入後複製效果：
<table border="1"> <tr> <th>姓名</th> <th colspan="3">成绩</th> <!-------------横向跨列，3表示跨了3列--> </tr> <tr> <td>张丹</td> <!--------------这是第一列---姓名--> <td>98</td> <!--------------这是第二列---成绩1--> <td>56</td> <!----------------这是第三列---成绩2--> <td>87</td> <!--------------这是第四列---成绩3--> </tr> </table>登入後複製登入後複製效果：
某一個單元格縱跨兩行，使用 rowspan="2"來設置，數字代表跨的行
<table border="1"> <tr> <th>姓名</th> <th colspan="3">成绩</th> <!-------------横向跨列，3表示跨了3列--> </tr> <tr> <td>张丹</td> <!--------------这是第一列---姓名--> <td>98</td> <!--------------这是第二列---成绩1--> <td>56</td> <!----------------这是第三列---成绩2--> <td>87</td> <!--------------这是第四列---成绩3--> </tr> </table>登入後複製登入後複製效果：
#4、HTML的各項標籤可以隨意巢狀。
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>开会</td> </tr> <tr> <td>写报告</td> </tr> </table> //---------------------中间是一个完整的单元格 </td> </tr> </table>登入後複製#效果：
5、更改表格樣式
5.1儲存格樣式之----儲存格邊距，確保內容與邊框的距離
<table border="2" cellpadding="10"> //----------使用cellpadding来设置单元格边距 <tr> <td> <p>我要做的事</p> <table border="1" cellpadding="5"> //----------使用cellpadding来设置单元格边距 <tr> <th rowspan="3">周一</th> <td>做PPT</td> </tr> <tr> <td>开会</td> </tr> <tr> <td>写报告</td> </tr> </table> </td> </tr> </table>登入後複製效果：
#5.2單元格樣式之----為表格新增背景顏色或圖片（顏色用bgcolor；圖片用background）
<table border="2" cellpadding="10" bgcolor="yellow"> <!----------使用bgcolor来设置背景颜色为黄色--> <tr> <td> <p>我要做的事</p> <table border="1" cellpadding="5" background="http://images.missyuan.com/attachments /day_080420/20080420_ba6f1b3324576143d62brfIPM291T4da.jpg"> <!---------使用background来设置背景图片--> <tr> <th rowspan="3">周一</th> <td>做PPT</td> </tr> <tr> <td>开会</td> </tr> <tr> <td>写报告</td> </tr> </table> </td> </tr> </table>登入後複製效果：
## 5.3給某一個單元格單獨設定背景
<table border="2" cellpadding="10" bgcolor="yellow"> <!----------使用bgcolor来设置表格背景颜色为黄色--> <tr> <td> <p>我要做的事</p> <table border="1" cellpadding="5"> <tr> <th bgcolor="white" rowspan="3">周一</th> <!--给标题这一个单元格设置背景颜色--> <td>做PPT</td> </tr> <tr> <td>开会</td> </tr> <tr> <td background="http://images.missyuan.com/attachments /day_080420/20080420_ba6f1b3324576143d62brfIPM291T4da.jpg">写报告</td> <!---------使用background来设置单元格背景图片--> </tr> </table> </td> </tr> </table>登入後複製效果：
##5.4在表格中排列內容--讓表格更好看(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>登入後複製
#效果：
上面這些功能，可以依照實際情況隨意嵌套，如同搭積木一樣，大家可以依照自己喜好利用這些功能寫出酷炫的表格！
html影片教學
推薦教學：《
以上是html怎麼建立表格的詳細內容。更多資訊請關注PHP中文網其他相關文章！
