css中table標簽詳解(一)

什么是table標簽，以及table標簽的組成？

不叨叨，直接上代碼

    <table><tr><td></td></tr></table>

我們可以看到table標簽的組成是由table tr td 構成的.
其中table指的是整個表格,tr指的是行,td指的是列.

那我們如果要表示三行四列要如何表示呢?

三行肯定要三個tr,四列肯定要四個td,那它們如何嵌套的呢?看代碼!

    <table><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table>

我們可以看到tr里面要嵌套td,表示的意義也就是第一行中有四個列,第二行中有四個列…所以最終就是四行四列.
我們現在看一下在瀏覽器上的效果?

我們發現這里面毛都沒有,這是因為我們沒有給table設置屬性.

那我們可以給table設置哪些屬性呢?

(1).設置height width屬性:
<1>給table設置:

   <style>table{width: 200px;height: 150px;border: 1px solid black;}</style>

可以看到給table設置寬高是指整個表格的寬高!
<2>給tr設置

   <style>table{width: 200px;height: 150px;border: 1px solid black;}tr{width:50px;height: 50px;border: 1px solid red;}</style>

我們可以看到給tr設置寬高毛效果都沒有.
<3>給td設置

 <style>table{width: 200px;height: 150px;border: 1px solid black;}td{width:50px;height: 50px;border: 1px solid red;}</style>

給td設置就有效果了,可以看到有三行四列,但每個單元格的寬高是50嗎?答案顯然不是,我們可以看到每個單元格之間都有一定的邊距.!
那我們把table的寬高去掉,只留下border看一下效果:

      table{border: 1px solid black;}td{width:50px;height: 50px;border: 1px solid red;}

現在每個單元格的寬高就是50了.

注意:table標簽和td標簽都需要設置border,不然默認情況下不會顯示!

2.水平居中屬性

<1>table標簽(方便查看,我給每個單元格加上了序列)

      table{border: 1px solid black;margin: 0 auto;}td{width:50px;height: 50px;border: 1px solid red;}

使用margin : 0 auto;

<2>td: text - align : center;(讓文本居中)

        table{border: 1px solid black;margin: 0 auto;}td{width:50px;height: 50px;border: 1px solid red;text-align: center;}

<3>tr使用text - a text - align : cente;也可以讓文本居中,我們使用td就可以了,我這里就不演示了!

3.垂直居中:這里主要看一下td的,tr同樣也可以!

因為已經垂直居中了,為了看到效果,我先改一下!

現在是頂部對齊!

現在我再改一下:


現在就已經是水平和垂直都居中了!

4.

    table{border: 1px solid black;margin: 0 auto;border-collapse:collapse;}td{width:50px;height: 50px;border: 1px solid red;text-align: center;/* vertical-align: top; */vertical-align: center;}

<2>如果我們不想要將內外邊框合并,那就要用到這一個屬性:

      table{border: 1px solid black;margin: 0 auto;}td{width:50px;height: 50px;border: 1px solid red;text-align: center;/* vertical-align: top; */vertical-align: center;}

所以這個值的默認值就是 border-spacing: 2px;那我們現在修改一下:

     table{border: 1px solid black;margin: 0 auto;border-spacing: 10px;}td{width:50px;height: 50px;border: 1px solid red;text-align: center;/* vertical-align: top; */vertical-align: center;}

我們可以看到箭頭處的間隙明顯大了!

5.padding屬性:

<1>table:

       table{border: 1px solid black;margin: 0 auto;padding: 10px;}td{width:50px;height: 50px;border: 1px solid red;/* text-align: center; *//* vertical-align: top; *//* vertical-align: center; *//* padding: 10px; */}

我們可以看到給table加padding屬性,與border-spacing: 10px;還有些不一樣,這個只是改變四周的距離,不是改變每個單元格之間的距離!

<2>td

未加padding屬性：

     table{border: 1px solid black;margin: 0 auto;/* padding: 10px; */}td{width:50px;height: 50px;border: 1px solid red;/* text-align: center; *//* vertical-align: top; *//* vertical-align: center; *//* padding: 10px; */}

可以看到文本距離邊框的間距很小！

加上padding之后：

      table{border: 1px solid black;margin: 0 auto;/* padding: 10px; */}td{width:50px;height: 50px;border: 1px solid red;/* text-align: center; *//* vertical-align: top; *//* vertical-align: center; */padding: 10px;}

我們可以看到間距大了很多！

總結：今天主要說了一下table td 的各個標簽的寬高設置，以及table tr td的邊框設置，如何合并，如何設置寬度，以及各個標簽的居中，還有padding的設置！

總結

以上是生活随笔為你收集整理的css中table标签详解(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。