HTML Table tr td th表格標簽元素知識篇
<table>表格布局篇,認識html表格基礎語法,認識table表格結構語法,通過html table tr td、html table tr th表格實例掌握表格認識html表格table樣式布局。同時table的樣式可以通過CSS樣式控制其各式各樣的樣式。
- html table表格目錄
一、table表格語法與結構 - TOP
- <table>
- <tr>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- </table>
或者
- <table>
- <tr>
- <th> </th>
- <th> </th>
- <th> </th>
- </tr>
- </table>
以上2個表格結構中td和th使用,沒有區別均可使用。
二、table標簽使用說明 - TOP
我們學習DIV+CSS了,不是就完全放棄丟棄table表格布局。想想我們為什么學習DIV CSS其中一個因素,讓布局更簡單、代碼更簡單,所以有時候我們也需要table表格來布局。
比如,電子表格型的數據表格。
三、Table表格標簽使用場景 - TOP
這個是淘寶支付寶頁面里任意截的一張表格運用圖片:
html table表格實際應用截圖
四、Table tr td th表格使用案例 - TOP
- <table width="300" border="1" cellspacing="0">
- <tr>
- <th>班級</th>
- <th>日期</th>
- <th>標題</th>
- </tr>
- <tr>
- <td>一班</td>
- <td>2012-5-10</td>
- <td>標題1</td>
- </tr>
- <tr>
- <td>二班</td>
- <td>2012-5-20</td>
- <td>標題2</td>
- </tr>
- </table>
DW軟件里截圖:
table案例教程布局截圖
谷歌瀏覽器效果截圖:
table表格布局案例在瀏覽器中截圖
五、DW軟件輸入表格標簽 - TOP
可以在DW軟件中直接輸入你要的表格:
第一步:單擊DW軟件“插入”,然后選擇點擊“表格(T)”
DW布局表格
第二步:在彈出“表格”設置選項卡,設置需要表格,行、列、寬度等屬性
DW軟件輸入table布局
第三步:設置完后,點擊“確定”,即可在DW輸入標準的table表格標簽。
六、DIVCSS5對于table表格總結 - TOP
1、表格可以在DW輸入,拖拽調整
2、table表格實用于多列數據列表
3、學習了DIV CSS還得學習TABLE
4、table會使用靈活運用即可
5、多列數據列表table標簽要比使用div css節約代碼,任意控制內容排版
如需轉載,請注明文章出處和來源網址:http://www.rs2pl.com/html/h380.shtml