3school 知识点随笔记录(HTML列表)

创建表格

// 每个表格由 table 标签开始。
// 每个表格行由 tr 标签开始。
// 每个表格数据由 td 标签开始。


示例 :

<html>

<body>

<h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

 


表格的表头使用<th>标签进行定义,显示为粗体字,以及空单元格性质
caption : 创建标题

colspan :横向占单元格数

rowspan :纵向占单元格数

cellpadding :单元格边距,即单元格大小

cellspacing :单元格间距

background :添加目标路径的背景颜色,或者直接使用 bgcolor="red" 定义颜色

align="left" :定义单元格内容靠左

align="right" :定义单元格内容靠右

frame : 定义表格框架 box : 单线框架包裹
above : 只有上面一条线
below : 只有下面一条线
hside : 上下两条线
vsides : 左右两条线

示例 :

<table border="1" // 边框的属性格式
cellpadding="10" // 边框边距大小
cellspacing= "10" // 单元格间距
background = " C:\Users\Administrator\Desktop\timg.jpg " // 表格背景颜色 >

<caption>我的标题</caption> // 标题显示

<tr>
<th colspan="2" // 表示横向表头占两个单元格 >Another Heading</th> // 表头显示
</tr>

<tr>
<td bgcolor = "red" // 单元格背景颜色
align="right" // 单元格内容靠右 >
你好
</td>

<td>世界</td>
</tr>

<tr>
<th> 姓名 </th>
<td> 张三 </td>

<tr>
<th rowspan="2" // 表示纵向表头占两个单元格 > 电话 </th>
<td></td> // 显示空表格,但是没有边框和位置,可以添加空格占位符显示边框<td>&nbsp;</td>
</tr>

<tr>
<td>hello</td>
</tr>

</table>

 

表格内镶嵌表格


示例 :


<html>

<body>

<table border="1">
<tr>

<td>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</td>


<td>这个单元包含一个表格:
<table border="1"> // 表格内创建新的表格

<tr>
<td>A</td>
<td>B</td>
</tr>

<tr>
<td>C</td>
<td>D</td>
</tr>

</table>

</td>

</tr>

</table>

</body>
</html>

 


无序和有序列表


ul : 无序列表

ol : 有序列表

dl : 自定义列表

示例 :

<html>

<body>

<ol start="50" // 定义序列号从50开始 > // 定义有序列表,把 "ol" 改为 " ul " 即为无序列表

<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>

</ol>

</body>
</html>


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

示例 :

<dl> // 自定义列表
<dt>Coffee</dt> // 列表项目
<dd>Black hot drink</dd> // 列表项目注释及定义
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

 

posted @ 2019-04-16 17:30  潇洒一天  阅读(274)  评论(0编辑  收藏  举报