1）float浮動

德經第二十二章中有一句是說“少則得，多則惑”，這句話的意思是：少取則真得，貪多則反而導致自身的混亂。結合我親身經歷，更容易理解這句話的意思。

有一段時間，我們天都學習10個小時，這種情況一直持續了大半個月。可是效果卻幾乎等于沒有，這段時間內每天都會有大量的信息涌入你的腦袋，在學的那一刻，你感覺你已經完全會了。但是過個一兩天，你卻完全不記得你到底學過些什么，像失憶了似的。

艾賓浩斯記憶曲線也告訴我們，大腦的記憶是一個緩慢的過程，想要對某一知識記憶深刻，就需要不斷地重復練習。直到隨時隨地拿來就用的地步，你就再也不會忘記了。

為什么說少則得，多則惑呢？每天只學一點，練習好幾遍，把這個知識點刻到腦子里面去，這樣日積月累你會發現你已經學會了很多。每天學習很多知識點，很少時間去練習，過段時間你會發現你什么都沒有記住，到用的時候根本想不起來，還得返回頭再去學習一遍。徒增學習成本，也就是多則惑的道理。

好了言歸正傳，今天我們來學習html中的表格和表單，這兩個可不是一個東西哦。

表格：excel表格知道吧，橫行豎起列的那種表格。看圖：

上面是一個9行2列的表格，在html里面也有這種表格，我們來使用html的table表格標簽來實現一個5行3列的表格。

上圖中table標簽表示這是一個表格，tr表示一行，圖中我寫了五行，都用紅圈標注了出來，每個tr里面又包含著td，td表示列，第1行里面有3列，第2、3、4、5行每行里面都有3列。

在瀏覽器中的效果：

和我們想象中的樣子好像有點不一樣，沒有格子，這是因為我們沒有設置的緣故，table標簽允許你通過border屬性來設置邊框（也就是格子），那我們來給它設置一個邊框吧。

通過給table標簽添加border="1"，就可以讓表格有邊框了，來看看瀏覽器中的效果：

還是有點別扭，我腦海里面的表格應該是和艾賓浩斯記憶曲線的那張表格一樣才對啊，現在的這個表格有點鏤空的感覺，第1行的第1列和第1行的第2列，也就是“關羽”、“男”之前有距離，如何把這個距離去掉呢？我們可以通過table標簽的cellspacing屬性把距離去掉，試一下：

加了cellspacing="0" 屬性后，瀏覽器中的效果如下：

當然了， table標簽的cellspacing屬性的不光可以等于0，還可以等于其他值，比如我們就是希望有距離，那么我們設置成20試一下：

瀏覽器中的效果：

cellspacing屬性的值應該取多少，按照你的需求來設置就好了。

現在還有一個問題，我覺得每個單元格的太小了，也就是“關羽”這個格子的邊框和“關羽”這兩個字貼得太緊了，一點都不好看，我們可以讓他稍微有點距離，那樣看起來應該比較美觀一點。這個需求可以通過table標簽的cellpadding屬性來設置，其實也就是設置內邊距，關于內邊距的概念我們在《踏上編程之路的必經之路之html篇三》中講解過，如果忘記的同學可以返回去看一下。

我們將cellpadding設置為10，在瀏覽器中的效果如下：

現在整個表格感覺是豎起來的，能不能讓他感覺是橫著呢？table標簽允許你調整它的寬度，只要寬度夠了，感覺起來自然就是橫的了。我們通過table標簽的width屬性來調整表格的寬度：

調整表格的寬度為600，瀏覽器中的效果如下：

表格中的文字現在是左對齊，也就是靠近單元格的左邊，我們可以讓它居中，或者靠右對齊（右對齊），文字的對齊方式可以通過tr標簽的align屬性來控制：

注意文字對齊方式，是給tr標簽（也就是table的行標簽）設置了align屬性，不是給table，不要寫錯地方了。align="center"就是讓文字居中，align="right"就是讓文字右對齊，如果不寫，默認是左對齊。

設置了文字對齊方式后，瀏覽器中的效果如下：

最我們整體調整一下，我需要有邊框（border="1"，設置為0就是沒有邊框），單元格之間不要距離（cellspacing="0"，設置成其它值就是有距離），內邊距需要5（cellpadding="5"），表格寬度需要400（width="400"），文字統一都是居中對齊（table標簽的tr標簽上面設置align="center"）,整體設置后的代碼如下：

瀏覽器中的效果如下：

其實table標簽也有一個align屬性，它可以讓整表格在瀏覽器中的居中、靠左或者靠右對齊，有興趣的同學可以自己嘗試一下。

最后提醒一句，代碼中的各種標簽和標簽的屬性還有單雙引號，都必須是英文的，如果你寫成中文的，是不正確的。

舉個例子：

良好的行動力，是成功的一半，動手練起來。