資訊專欄INFORMATION COLUMN
摘要：中設(shè)置的值一般為表格寬度的最大值，不能改變，即使內(nèi)部的內(nèi)容寬度超過也不能改變。所以在中只有討論設(shè)置的可能了，中的設(shè)置和幾個之間的設(shè)置有關(guān)。當(dāng)幾個都沒有設(shè)置具體值時，平均分配總的值。還有一點要注意，就是的和的之間的關(guān)系。
一、設(shè)置好看的單邊框表格
1、一種實現(xiàn)方式
分別給table標簽和td標簽設(shè)置不在同一方向的border屬性，如下table設(shè)置‘左上’邊框，td設(shè)置‘右下’邊框。其他設(shè)置方式同樣可以實現(xiàn)。
table{ border-right: 1px solid; border-top: 1px solid; /*相鄰邊框被合并*/ border-collapse:collapse; } td{ border-left: 1px solid; border-bottom: 1px solid; }
?
二、給表格設(shè)置居中，及文本居中
1、表格整體居中 ?
table{ margin:auto; }
?
2、table文本居中
?
td{ text-align:center; }
三、table的width和height設(shè)置
1、table中的width和height設(shè)置及其作用：
table中設(shè)置的height其實是設(shè)置個最小值，也就是當(dāng)表格中的內(nèi)容或者行高總值超過這個設(shè)置值時，會自動延長表格的height值，當(dāng)表格中的內(nèi)容或者行高沒有達到這個值時，會自動擴大到這個值。table中設(shè)置的width值一般為表格寬度的最大值，不能改變，即使內(nèi)部的內(nèi)容寬度超過也不能改變。（這個內(nèi)部內(nèi)容如果是圖片的話是可以改變表格寬度的。）
?????2、tr標簽中width和height設(shè)置及其作用：
tr標簽里面的width設(shè)置不起任何作用，因為從第一點可以看出，表格的width是不能改變的，tr標簽當(dāng)然就不起作用了。所以在tr中只有討論height設(shè)置的可能了，tr中的height設(shè)置和幾個tr之間的設(shè)置有關(guān)。當(dāng)幾個tr都設(shè)置了height的具體數(shù)值時，各個tr的height按照設(shè)置的值的比例來分配總的height值，注意這里說的是總的height值。當(dāng)幾個tr都沒有設(shè)置height具體值時，平均分配總的height值。當(dāng)有的tr設(shè)置了具體的數(shù)值，有的沒有設(shè)置具體的數(shù)值為默認時，先保證各個tr的基本需要，剩下的再滿足設(shè)置了具體值的tr，之后再全部給沒有設(shè)置具體值的tr。最后一種情況還要考慮總的寬度不夠tr總的設(shè)置值的情況，不夠的話要滿足tr的基本需要，這里會自動延長表格的height的。然后再考慮設(shè)置了heightr的tr，最后考慮沒有設(shè)置height的tr。
? 3、td標簽中width和height設(shè)置及其作用：
td標簽里面的width和height都是起作用的。先看td的width吧，某一個td的width是和所處的一列每個td的width都相關(guān)的，取其中最大的width作為這一列中每個td的width，這點是讓我們最混淆的地方，一定要從全局把握某個td的width，不能從這一個的width設(shè)置就斷言它的寬度就是多少，這樣是不準確的。當(dāng)我們把每一列的寬度都弄清楚之后，事情就好辦了。這時候各個td之間的寬度分配按照第二條中各 tr的height分配規(guī)律，有一點不同的是全部是默認的情況下，各td的width不是平均分配，而是根據(jù)各自的實際內(nèi)容按比例分配。再看看td的height設(shè)置吧，這個相對簡單一點了，不過各個td的height要看這個td所在的行的最大高度來確定這一行的每個td的height，然后各個行的高度情況和tr中的height分配原則是一樣的。還有一點要注意，就是td的height和tr的height之間的關(guān)系。首先肯定是根據(jù)內(nèi)容的需 要，在這個基礎(chǔ)上，再根據(jù)設(shè)置的值來確定，哪個設(shè)置的值大就按照哪個，如果一個設(shè)置了值一個沒有設(shè)置值，那么按照設(shè)置值的算。
?四、table文本格式設(shè)置
td{ font-weight: bold; font-size: 20px; font-family:"華文楷體"; }
?
?
?
?
?
?
?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1238.html
摘要：兼容性屬性兼容存在一定問題，高版本需要添加前綴父子第四使用通過父級元素布局將子框轉(zhuǎn)換為再設(shè)置子元素水平居中兼容性不支持父子第五水平垂直將水平居中和垂直居中的相結(jié)合兼容性屬性兼容性問題父子第六父相對子絕對，上下左右居中兼容性及以上父子 前端頁面開發(fā)中關(guān)于內(nèi)容居中的需求應(yīng)用概率很大，自己搜集一些資料和總結(jié)關(guān)于css里的幾種居中效果實現(xiàn) 第一常用text-align:center先將子元素將...
摘要：兼容性屬性兼容存在一定問題，高版本需要添加前綴父子第四使用通過父級元素布局將子框轉(zhuǎn)換為再設(shè)置子元素水平居中兼容性不支持父子第五水平垂直將水平居中和垂直居中的相結(jié)合兼容性屬性兼容性問題父子第六父相對子絕對，上下左右居中兼容性及以上父子 前端頁面開發(fā)中關(guān)于內(nèi)容居中的需求應(yīng)用概率很大，自己搜集一些資料和總結(jié)關(guān)于css里的幾種居中效果實現(xiàn) 第一常用text-align:center先將子元素將...
摘要：目前，中關(guān)村黑馬程序員訓(xùn)練營已成長為行業(yè)學(xué)員質(zhì)量好課程內(nèi)容深企業(yè)滿意的移動開發(fā)高端訓(xùn)練基地，并被評為中關(guān)村軟件園重點扶持人才企業(yè)。黑馬程序員的學(xué)員篩選制度，遠比現(xiàn)在以上的企業(yè)招聘流程更為嚴格。系統(tǒng)的學(xué)習(xí)可以參考w3c的教程 web概念概述 * JavaWeb： * 使用Java語言開發(fā)基于互聯(lián)網(wǎng)的項目 * 軟件架構(gòu)： 1. C/S: Client/Server 客戶端/服務(wù)...
摘要：在中實現(xiàn)垂直居中很多時候會用到，不過我一直對的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識點。將盒子的垂直中心點與父級盒子基線往上一半高度的位置對齊。時位置與設(shè)置一致。我們可以將設(shè)為來讓元素完全垂直居中。 在 css 中實現(xiàn)垂直居中很多時候會用到 vertical-align ，不過我一直對 vertical-align 的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識點。原文鏈接 1. 適...
摘要：在中實現(xiàn)垂直居中很多時候會用到，不過我一直對的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識點。將盒子的垂直中心點與父級盒子基線往上一半高度的位置對齊。時位置與設(shè)置一致。我們可以將設(shè)為來讓元素完全垂直居中。 在 css 中實現(xiàn)垂直居中很多時候會用到 vertical-align ，不過我一直對 vertical-align 的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識點。原文鏈接 1. 適...
閱讀 3836·2021-11-17 09:33
閱讀 2900·2021-09-22 15:12
閱讀 3433·2021-08-12 13:24
閱讀 2538·2019-08-30 11:14
閱讀 1813·2019-08-29 14:09
閱讀 1403·2019-08-26 14:01
閱讀 3172·2019-08-26 13:49
閱讀 1855·2019-08-26 12:16
