3項目三表格的應用

HTML5+CSS3網頁設計與布局項目三表格的應用3.1表格的應用3.2表格的基礎用法3.1表格的應用3.1表格的應用

表格在日常生活中很常見的，在Excel中創(chuàng)建一個表格時，只需在表格中的位置填寫相對應的內容，使用鼠標拖動表格的寬度和高度就能完成一個表格的制作，很簡單的操作。但在網頁中要去做一個表格就相對要復雜一點，需要我們使用代碼去定義表格每一個屬性。

添加表格語法的代碼：

<table>

表內代碼……</table>3.2表格的基礎用法3.2.1行代碼3.2.2單元格3.2.3列的合并3.2.4行的合并3.2.5表格大小3.2.10表格標題3.2.9表格表頭3.2.8單元格間距3.2.7單元格、邊框的背景顏色3.2.6表格內文字位置3.2.1行代碼

在表格中每增加一行需要在<table></table>中添加<tr></tr>來完成。

添加表格語法的代碼： <table> <tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>3.2.2單元格

在表格中每增加一個單元格需要在<tr></tr>中添加<td></td>來完成。

添加表格語法的代碼： <table> <tr> <td>單元格內容</td> <td>單元格內容</td> </tr> <tr> <td>單元格內容</td> <td>單元格內容</td> </tr>

</table>

在table中增加border屬性就是給表格增加邊框效果3.2.3列的合并

在單元格中的td增加colspan就是將常見表格中的列合并。

列合并的代碼：

<tdcolspan="2">中國四大名著</td>3.2.4行的合并在單元格中的td增加rowspan就是將常見表格中的行合并。

行合并的代碼：<tdrowspan="2">中國四大名著</td>3.2.5表格大小

在日常生活中的表格，每個單元格的大小都會有所調整，在html中可以在tbale、tr或td中增加width和height來調整單元格的大小。

修改單元格大小的代碼：

<tableborder="1"width="320"height="200">

表內代碼……</table>3.2.6表格內文字位置

單元格中的文字如果想要調整位置，可以使用align屬性調整文字的左右中位置，使用valign屬性調整上下中的位置。

修改表格內文字位置的代碼：

<tdvalign="bottom"align="center">中國四大名著</td>3.2.7單元格、邊框的背景顏色

在表格中如果需要調整單元格、表格或邊框的背景顏色，可以使用bgcolor屬性來修改背景顏色。

修改背景顏色的代碼：<tableborder="3"width="300"height="200"bgcolor="aquamarine"bordercolor="red">3.2.8單元格間距

如果需要調整單元格之間的間距，可以使用cellspacing來調整。

修改單元格間距的代碼：

<tableborder="3"width="300"height="200"bgcolor="aquamarine"bordercolor="red"cellspacing="10">3.2.9表格表頭

如果需要增加表格的表頭，可以增加<th></th>來作為表格的表頭。

添加表格表頭的代碼：

<th>

表頭內容……</th>3.2.10表格標題

如果需要增加表格的標題，可以增加<caption