生活随笔
收集整理的這篇文章主要介紹了
table表格的两个实现方法(怎样消除内部边框的间距)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在用table寫表格的時候我們初學者容易寫成這樣:
而要寫成下面這樣:
方法一:
代碼實例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">table {width:500px;height: 200px;border: 1px solid red;border-collapse: collapse;}table tr td{border: 1px solid red;}</style>
</head>
<body><table><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>
</body>
</html>
可以顯示這個效果是這個效果的功勞 border-collapse: collapse;
下面說一下這個屬性有什么作用:
為表格設置合并邊框模型：
方法二:
代碼實例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title><style type="text/css">table {width:500px;height: 200px;}</style>
</head>
<body><table style="background-color:red" ><tr style="background-color:white"><td></td><td></td></tr><tr style="background-color:white"><td></td><td></td></tr><tr style="background-color:white"><td></td><td></td></tr></table>
</body>
</html>
方法三:
代碼實例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title><style type="text/css">table {width:500px;height: 200px;}</style>
</head>
<body><table bgcolor="red" ><tr bgcolor="white"><td></td><td></td></tr><tr bgcolor="white"><td></td><td></td></tr><tr bgcolor="white"><td></td><td></td></tr></table>
</body>
</html>
方法四:
代碼實例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title><style type="text/css">table {width:500px;height: 200px;background-color:red;}table tr{background-color:white;}</style>
</head><body><table><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>
</body>
</html>
方法二三四的區別于聯系：
簡單說一下:
是內聯樣式和css中寫法上的區別，在html中可以通過style="" 給標簽添加css樣式， 也可以寫在css中控制標簽
詳細介紹請看鏈接:
https://blog.csdn.net/qq_43290288/article/details/102924012
總結
以上是生活随笔為你收集整理的table表格的两个实现方法(怎样消除内部边框的间距)的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
