轉(zhuǎn)自：https://i.cnblogs.com/posts?categoryid=1121494

上一講，講了關(guān)于《控制表格及其表項的對齊方式》，在這里我要講講表格及其屬性 ，然后大家在復習一下上一節(jié)的內(nèi)容，這樣就會有事半功倍的感覺。

??表格，一般的用于對網(wǎng)頁的內(nèi)容進行排版，比如文字放在頁面的某個位置，你就可以做個表格，然后設(shè)置一下表格的屬性，它文字放在表格的某個單元個里，就行了；其實用過word的朋友應該非常明白的。除了頁面的排版外，表格還可以制作出非常好看的效果，比如按鈕、變色、邊線等等。大家要會靈活的運用。

??看看表格的基本語法：<table>...</table> - 定義表格
? ?? ?? ?? ?? ?? ?? ? <tr> ...</tr>- 定義表行
? ?? ?? ?? ?? ?? ?? ? <th> ...</th>- 定義表頭
? ?? ?? ?? ?? ?? ?? ? <td> ...</td>- 定義表元
??下面看看它的示例：
? ?<table border=1>??<!--border是表格的邊框?qū)傩?#xff0c;=1，即邊框的寬為一象素-->
? ?<tr>? ?? ?? ?? ?? ? <!--定義表格的行-->
? ?<th>Food</th><th>Drink</th><th>Sweet</th><!--定義表格的表頭，即標題-->
? ?</tr>? ?? ?? ?? ?? ?<!--行結(jié)束-->
? ?<tr>
? ?<td>A</td><td>B</td><td>C</td>??<!--定義表格的表元-->??
? ?</tr>
? ?</table>
? ???
　
? ?不帶邊框的表格：
? ?<table>
? ?<tr>
? ?<th>Food</th><th>Drink</th><th>Sweet</th>
? ?</tr>
? ?<tr>
? ?<td>A</td><td>B</td><td>C</td>??
? ?</tr>? ??
? ?</table>
? ?
?

? ?跨多行、多列的表元(Table Span)
? ?跨多列的表元 <th colspan=#>
? ?<table border>
? ?<tr><th colspan=3> Morning Menu</th>??<!--colspan=3，跨三列表元-->
? ?<tr><th>Food</th>? ?? ? <th>Drink</th>??<th>Sweet</th>
? ?<tr><td>A</td><td>B</td><td>C</td>
? ?</table>
? ???
? ?跨多行的表元 <th rowspan=#>
? ?<table border>
? ?<tr><th rowspan=3> Morning Menu</th><!--rowspan=3，跨三行表元-->
? ?? ? <th>Food</th> <td>A</td></tr>
? ?<tr><th>Drink</th> <td>B</td></tr>
? ?<tr><th>Sweet</th> <td>C</td></tr>
? ?</table>
? ???
? ?表格尺寸設(shè)置 <table border=#>邊框尺寸設(shè)置：
? ?<table border=10>
? ?<tr><th>Food</th><th>Drink</th><th>Sweet</th>
? ?<tr><td>A</td><td>B</td><td>C</td>? ?? ?
? ?</table>
? ???
? ?<table border width=# height=#>表格尺寸設(shè)置：
? ?<table border width=170 height=100>
? ?<tr><th>Food</th><th>Drink</th><th>Sweet</th>
? ?<tr><td>A</td><td>B</td><td>C</td>? ?? ?
? ?</table>
? ???
? ?<table border cellspacing=#>表元間隙設(shè)置：
? ?<table border cellspacing=10>
? ?<tr><th>Food</th><th>Drink</th><th>Sweet</th>
? ?<tr><td>A</td><td>B</td><td>C</td>? ?? ?
? ?</table>
?
? ?
? ?<table border cellpadding=#>表元內(nèi)部空白設(shè)置：
? ?<table border cellpadding=10>
? ?<tr><th>Food</th><th>Drink</th><th>Sweet</th>
? ?<tr><td>A</td><td>B</td><td>C</td>? ?? ?
? ?</table>
????
? ?
? ?表格內(nèi)文字的對齊/布局
? ?<tr align=#>
? ?<th align=#> #=left, center, right
? ?<td align=#>
? ?<table border width=160>
? ?<tr>
??<th>Food</th><th>Drink</th><th>Sweet</th>
??<tr>
? ? <td align=left>A</td>
? ? <td align=center>B</td>
? ? <td align=right>C</td>??
??</table>

? ???
? ?<tr valign=#>
? ?<th valign=#> #=top, middle, bottom, baseline
? ?<td valign=#>
? ?<table border height=100>
? ?<tr>
? ?? ?? ?? ?? ?<th>Food</th><th>Drink</th>
? ?? ?? ?? ?? ?<th>Sweet</th><th>Other</th>
? ?<tr>
? ?? ?? ?? ?? ?<td valign=top>A</td>
? ?? ?? ?? ?? ?<td valign=middle>B</td>
? ?? ?? ?? ?? ?<td valign=bottom>C</td>
? ?? ?? ?? ?? ?<td valign=baseline>D</td>
? ?</table>
? ???
? ?好了，表格的基本的應用就是這些了。大家有什么問題，積極發(fā)問啊！！！

轉(zhuǎn)載于:https://www.cnblogs.com/sharpest/p/7903004.html

總結(jié)

以上是生活随笔為你收集整理的HTML基础第六讲---表格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。