html的表格和列表 - 精致猪猪侠

表格

基本语法：

1. <table></table>用于定义表格的标签
2.·<tr></tr>用于定义表格的行，必须嵌套在 <table></table>标签中
3.<td></td>用于定义表格的单元格，必须嵌套在<tr></tr>标签中
4.<th></th>tr标签表示表格的表头单元格，位于表格的第一行或第一列，表头单元格里的文本内容加粗居中显示，必须嵌套在<tr></tr>标签中

表格属性：(放在`<table>`的开始标签中)

属性名=“属性值”

1.align,可以取left, center, right,用来规定表格在浏览器窗口的位置
2.border,可以取1或“ ” ,用来规定表格单元是否有边框，默认是“ ”，无边框
3.cellpadding,可以取像素值 ,用来规定表格的单元边缘与其内容之间的空白，默认是1像素（在HTML中属性值是不用写单位的）
4.cellspacing,可以取像素值 ,用来规定表格的单元格之间的空白，默认2像素
5.width和hight,可以取像素值或百分比 ,用来规定表格的宽度和高度

表格的结构标签

1.当表格很长时，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分
2.<thead></thead>标签容纳表格的头部区域，其内部必须用于拥有<tr>标签，一般是位于第一行
3.<tbody></tbody>标签容纳表格的主体部分
4.以上标签都放在<table></table>标签中

合并单元格

1.合并方式：
1.跨行合并：rowspan="合并单元格的数目"
2.跨列合并：colspan="合并单元格的数目"
找目标单元格（写合并代码）（好理解）
1.跨行：最上侧的单元格为目标单元格，写合并代码
2.跨列：最左侧的单元格为目标单元格，写合并代码
合并单元格

先确定是跨行还是跨列
找到目标单元格，写合并方式。<td colspan="2"></td>
删除多余的单元格

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<table align="center" width="400" hight="400" border="1" cellspacing="0" cellpadding="2">
  <thead>
    <tr>
      <th colspan="3">单元格的学习，表头</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>
</body>
</html>

列表

1.无序列表：`<ul></ul>`

1.使用<ul>标签来定义无序列表，列表项用<li>列表项的内容</li>标签来定义
2.<ul>标签中只能嵌套<li></li>，不允许在其中嵌套其他标签
3.而<li></li>标签中可以容纳其他标签，相当于一个容器
4.无序列表会带有自己的样式属性，在实际应用中通过css来设置

<ul>
  <li>
    <p></p>
    <p></p>
  </li>
  <li></li>
</ul>
</body>

2. 有序列表：`<ol></ol>`

1.使用<ol>标签来定义无序列表，列表项用<li>列表项的内容</li>标签来定义
2.<ol>标签中只能嵌套<li></li>，不允许在其中嵌套其他标签
3.而<li></li>标签中可以容纳其他标签，相当于一个容器
4.有序列表会带有自己的样式属性，在实际应用中通过css来设置

<body>
<ol>
  <li>
    <p></p>
    <p></p>
  </li>
  <li></li>
</ol>
</body>

自定义列表

1.常使用于对术语或者名词进行描述和解释，自定义列表的列表前没有任何的项目符号
2.<dl></dl>标签来定义* 自定义列表*，该标签会与<dt></dt>(定义项目/名字)和<dd></dd>(描述每一个项目/名字)一起使用
3.<dl></dl>里面只能包含<dt>和<dd>
4.<dt>和<dd>的个数没有限制，经常是一个<dt>对应多个<dd>
5.<dt>与<dd>并不是包含关系，是大哥与小弟的形式，一般<dt>大哥</dt>的字体会比<dd>小弟<dd>的大一些，一般是大哥在上方，小弟们排在它的下方，起着对大哥有解释和说明的作用

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<dl>
<dt>联系方式</dt>
<dd>手机</dd>
<dd>微信</dd>
<dd>qq</dd>
</dl>
</body>
</html>

posted on 2021-10-15 23:03 精致猪猪侠阅读(219) 评论(0) 收藏举报

刷新页面返回顶部

表格