《head first html与css、xhtml》——第13章表格和更多列表

时间:2021-10-12 14:15:48

1.<th></th>里边是表头

2.<tr></tr>是一行

3.<td></td>是单元格内容

4.总的来说,表格的作用不在于外观,外观是CSS的工作。

5.<table summary="........">摘要的内容不会显示在网页中,它纯粹是增加表格的可读性(好吧,我估计很少有人去写这个summary了,呵呵……),起一小块文本的作用,还能使屏幕读取器更好地读取用户所描述的表格。

6.<caption>标题。

7.在那些不支持caption-side属性的浏览器中,标题仍然位于表格的上方。

table{
margin: 0 20px;
border: thin solid black;
caption-side: bottom;
}

《head first html与css、xhtml》——第13章表格和更多列表

8.在table{   border-spacing: 10px 30px;}定义边框间距

《head first html与css、xhtml》——第13章表格和更多列表

9.除了border-spacing属性之外,还有一种方法可以处理边框空间问题。使用CSS中一个叫做border-collapse的属性来消除边框间距。使用这个属性,浏览器将忽略设置在表格上的所有边框间距。

《head first html与css、xhtml》——第13章表格和更多列表

10.将一个单元格扩展为多行,可以使用rowspan属性定义一个表格单元所占据的行数。注意排版,<td>元素不要多写了,不然会遇到下面的情况

《head first html与css、xhtml》——第13章表格和更多列表《head first html与css、xhtml》——第13章表格和更多列表

11.使用colspan属性并设置列的数值,可以实现表格扩展为多列。

12.格式化列表,列表的属性为“list-style-type",此属性允许在你的列表中控制bullet(或者和他们一样,称为”maker")。

  disc: 是默认的实心圆点。

  circle:空心的圆点;

  square:实心方块;

  none:没有符号了;

13.可以用css定义自己喜欢的标志,list-style-image的属性允许你把图像作为列表的标志。

  例:li{

      list-style-image:url(image/backpack.gif);

      padding-top:5px;

      margin-left:20px;

    }

14.