CSS Table(表格).pdfVIP

CSS Table(表格) CSS 表格 使⽤CSS可以⼤⼤提⾼HTML表格的外观。 Company Contact Country Alfreds Futterkiste Maria Anders Germany Berglunds snabbköp Christina Berglund Sweden Centr c mercial M ctezuma Francisc Chang Mexic Ernst Handel R land Mendel Austria Island Trading Helen Bennett UK Königlich Essen Philip Cramer Germany Laughing Bacchus Winecellars Y shi Tannamuri Canada Magazzini Alimentari Riuniti Gi vanni R velli Italy N rth/S uth Sim n Cr wther UK Paris spécialités Marie Bertrand France The Big Cheese Liz Nix n USA Vaffeljernet Palle Ibsen Denmark 表格边框 指定CSS表格边框，使⽤b rder属性。 下⾯的例⼦指定了⼀个表格的Th和TD元素的⿊ 边框： 实例 table , th , td { b rder: 1px s lid black ; } 尝试⼀下 » 请注意，在上⾯的例⼦中的表格有双边框。这是因为表和th/ td元素有独⽴的边界。 为了显⽰⼀个表的单个边框，使⽤ b rder-c llapse属性。 折叠边框 b rder-c llapse 属性设置表格的边框是否被折叠成⼀个单⼀的边框或隔开： 实例 table { b rder-c llapse:c llapse; } table ,th , td { b rder: 1px s lid black ; } 尝试⼀下 » 表格宽度和⾼度 Width和height属性定义表格的宽度和⾼度。 下⾯的例⼦是设置100 ％的宽度，50像素的th元素的⾼度的表格： 实例 table { width:100%; } th { height:50px; } 尝试⼀下 » 表格⽂字对齐 表格中的⽂本对齐和垂直对齐属性。 text-align属性设置⽔平对齐⽅式，像左，右，或中⼼： 实例 td { text-align:right; } 尝试⼀下 » 垂直对齐属性设置垂直对齐，⽐如顶部，底部或中间： 实例 td { height:50px; vertical-align:b tt m; } 尝试⼀下 » 表格填充 如果在表的内容中控制空格之间的边框，应使⽤td和th元素的填充属性： 实例 td { padding:15px; } 尝试⼀下 » 表格颜⾊ 下⾯的例⼦指定边框的颜 ，和th元素的⽂本和背景颜 ： 实例 table , td , th { b rder:1px s lid green; } th { backgr und-c l r:green; c l r:white; } 尝试⼀下 » 更多实例 制作⼀个个性表格 这个例⼦演⽰了如何创建⼀个个性的表格。 设置表格标题的位置 这个例⼦演⽰了如何定位表格标题。 W3Cschool （ ）最⼤的技术知识 享与学习平台 此篇内容来⾃于 ⽹站⽤户上传并发布。