码迷,mamicode.com
首页 > 其他好文 > 详细

表格和列表

时间:2018-11-06 00:59:52      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:val   注释   圆点   font   rowspan   结构   高度   coff   分享   

一、表格

表格由table标签来定义,每个表格都有若干行(由<tr>标签来定义),每行被分割为若干个单元格(由<td>标签来定义),数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

1、标签

  表格标签:table
  行标签:tr
  单元格标签:td
  标题标签:caption
  表格头标签:thead
  表格身体标签:tbody

2、表格的基本结构

<table border="1">
  <tr>
    <td>内容</td>
    <td>内容</td>
  </tr>
  <tr>
    <td>内容</td>
    <td>内容</td>
  </tr>
</table>

在浏览器显示:技术分享图片

3、属性

table属性:
   width:100px  100%  宽度不写 宽度根据内容来
   border:        边框
   cellpading="0"  边距
   cellspacing="0" 间距
tr属性:
   height:100 g高度
   align:center  left  right  水平对齐方式
   valing:top  bottom  middle  垂直对齐方式
td/th属性
   height:100 g高度
   align:center  left  right  水平对齐方式
   valing:top  bottom  middle  垂直对齐方式

4、注意事项

 表格宽度默认是内容宽度
 单元格横平竖直
 单元格数量没有限制
 一般会把边距和间距设为0
 注意表格格式

5、合并单元格

单元格属性:
   colspan=2 水平合并  向右合并  值包含自己
   rowspan=2 垂直合并  向下合并  值包含自己
   合并单元格本质就是改变高度 宽度 占位实现的

二、列表

有序列表使用数字进行标记

无序列表使用粗体圆点(典型的小黑圆圈)进行标记

自定义列表:注释

 

1、有序列表使用<ol>标签

<ol>
 <li>Milk</li>
 <li>Coffee</li>
</ol>

在浏览器显示:技术分享图片

 

2、无序列表使用<ul>标签

<ul>
 <li>Milk</li>
 <li>Coffee</li>
</ul>

在浏览器显示:技术分享图片

 

3、自定义列表  

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开

<dl>
 <dt>Coffee</dt>
  <dd>- black hot drink</dd>
 <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

在浏览器显示:技术分享图片

 

表格和列表

标签:val   注释   圆点   font   rowspan   结构   高度   coff   分享   

原文地址:https://www.cnblogs.com/tanchangsha/p/9912319.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!