【阅读】《Head First HTML 与 CSS》第十三章——表格与更多列表
如何建立表格 <body><table border="1px"><tr> <th>上午</th> <th>下午</th> <th>晚上</th> </tr> <tr> <td>吃早饭</td> <td>吃中餐</td> <td>是晚餐</td> </tr></table></body> <table>：创建一个表格 <tr>创建一行 <th>这是表头，它默认会加粗 <td>这是一个单元格 不需要指定表的每一列，它会通过有多少个<td>来了解有多少列，它是指浏览器，如果你少了一个<td>，后面的<td>就会补上来 比较奇怪的是<th>是表头，但是这个表头不一定在一列（或一行中），它可以想这样→ 注意：HTML表格虽然也能够达到CSS表格那样使div对齐，但是最好不要这样，还是用CSS比较好，毕竟CSS是负责样式的 有具体的数据的时候用HTML表格，要对齐块元素的时候用CSS表格 为表格增加一个标题 <caption>一天一天 </caption>注意：这个标题默认是不在表格的框框里的 去除默认的双线条边框 当我们这样写的时候： table {border:thin solid black;margin-left:20px;margin-right:20px;}th, td {border:thin dotted black;padding:5px;}所达到的效果是这样的 有没有什么办法能够让双线条变成单线条呢？ 答案：在table中加上 border-collapse:collapse;就可以了 给表格一点颜色看看 在CSS中加上： th {background-color:#8282FF;}.colro {background-color:#FFA579;}并且在双数的行中加上class="color"就可以达到这样的效果： 这也是常见的表格增加颜色的效果，可以让读者更清楚的区分各列 不过添加class的方法并不是最好的方法，因为这样做拓展性不好，如果要增加一列，或是减少一列那就要改很多了，所以还有一个更好的方法 把.color改成 tr:nth-child(odd) {background-color:#FFAE88;}其中nth-child是一个定位到指定子元素的伪类，在括号中加odd意思是奇数（odd）个子元素都采用这个背景，还可以用偶数（even） 奇数和偶数还可以这样表示2n代表偶数，2n+1代表奇数 有意思的是：表格的表头并没有变成别的颜色，还是CSS中指定的颜色，这是因为表头的CSS的指向范围更加小一些 跨多行的单元格 <table><caption>一天一天 </caption><tr> <th>上午</th> <th>下午</th> <th>晚上</th> </tr> <tr> <td rowspan="2">吃早饭</td> <td>吃中餐</td> <td>是晚餐</td> </tr> <tr class="colro"> <td rowspan="2">吃中餐</td> <td>是晚餐</td> </tr> <tr> <td>吃早饭</td> <td rowspan="2">是晚餐</td> </tr> <tr class="colro"> <td>吃早饭</td> <td>吃中餐</td> </tr></table> 效果是这样的： 表格里嵌套表格 <tr> <td>吃早饭</td> <td>吃中餐</td> <td> <table> <tr> <th>9点</th> <th>10点</th> </tr> <tr> <td>吃</td> <td>拉</td> </tr> </table> </td> </tr> 效果就是这样： 列表标记 <ul><li>北京</li> <li>上海</li> <li>广州</li></ul> 效果： 默认的列表符是一个小豆豆，你也可以改成正方形或是中空的豆豆，甚至是指定的图片通过list-style-type修改列表的符号，通过list-style-images指定列表符的图片 关于line-style-position:如果它的值是inside就是这样的 如果是outside就是这样的 注意哈~那个红框框是我自己加上去的，意思就是inside就是说列表符号在列表项里面，outside就是在外面 BULLET POINTS HTML表格用来建立表格数据结构HTML表格元素<table>、<tr>、<th>和<td>一起来创建一个表格<table>元素定义并包围整个表格表格使用<tr>元素来定义行每行包含一个或者多个数据单元格，分别用<td>来定义使用<th>元素表示作为行或者列的表头的数据单元格表格采用格状布局。每行对应HTML中的一个<tr>.....</tr>行，每列对应行中的<td>.....<td>内容可以用<caption>元素提供关于表格的额外信息表格有边框间距，也就是单元格之间的间距表格数据单元格还可以有内边距和边框就像能够控制元素的内边框、边框和外边框一样，可以用CSS控制表格单元格的内边距、边距和边距间距border-collapse是针对表格的一个特殊的CSS属性，允许将单元格边框合并为一个边框，让外观更简洁可以用background-color属性为表格增加颜色。可以为整个表格、各行或者单个的数据单元格增加背景颜色使用CSS nth-child伪类可以为表格隔行增加背景颜色如果一个数据单元格没有数据，<td>元素中不放置任何内容。不过，需要使用一个<td>...</td>元素维持表格的对齐如果你的数据单元格要跨多行或多列，可以使用<td>元素的rowspan或colspan属性可以在表格中嵌套表格，将<table>元素及其所有内容放在一个数据单元格中表格应当用于表格数据，而不是建立页面布局。另一方面，可以像第11章所介绍的，使用CSS表格显示创建多栏页面布局与所有其他元素一样，可以用CSS指定列表的样式。有几个特定于列表的CSS属性，如list-style-type和list-style-imagelist-style-type允许改变列表中使用的列表标记类型list-style-image允许指定列表标记图像
文章地址：https://wenmayi.cn/post/129.html