Html实用型基础标签——列表、表格元素

本文主要是介绍Html实用型基础标签——列表、表格元素，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、列表

分为无序列表，有序列表，定义列表

1、无序列表

<ul><li>111</li><li>222</li><li>333</li><li>444</li>
</ul>

可以注意到的是，无序列表的列表标签类型为小圆点，也可以改成其他的

type的类型

1、disc(默认的，实心圆形)

2、circle（空心圆形）；

3 square（实心正方形）;

在<ul type="">中写表示改变全部li标签的形状，如果想改变单独的一个，则只需在你要改的那个<li type=“”>中添加类型即可

注意如果你想写多个<li></li>，办法也是选中这一行，然后ctrl+D即可，就不用ctrl+c、ctrl+v那么麻烦了

2、有序列表

<ol><li>111</li><li>222</li><li>333</li><li>444</li>
</ol>

与无序列表一样，有序列表的类型也可以改变

type：默认为1，变换类型有： a,A,i,I

<ol type="a"><li>111</li><li>222</li><li>333</li><li>444</li>
</ol>

顺序也可以改变

start：必须为数字

<ol type="a" start="3"><li>111</li><li>222</li><li>333</li><li>444</li>
</ol>

3、自定义列表

标题靠左对齐。内容则换行向右移动显示
<dl>
<dt>标题</dt>
<dd>正文内容</dd>
</dl>

<dl><dt>标题</dt><dd>正文内容正文内容正文内容正文内容正文内容正文内容</dd>
</dl>

这些列表之间是可以进行相互嵌套的，所以可以多加练习

二、表格

<table>

<caption>标题和摘要</caption>

</table>

<table><caption>Test</caption><tr><th>第一列</th><th>第二列</th><th>第三列</th><th>第四列</th></tr><tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr>
</table>

注意：th主要对下面的内容起说明作用，需要提前声明（可以不写，caption也可以不写，但tr td必须写）。th的内容会自动加粗和居中显示

这里便是一个最基本的表格样式，可以看到没有什么样式，需要添加样式的话如下，以及效果

border：边框默认为0px

borderColor=""：边框颜色

bgColor=""：内容颜色

align="right":left center 水平偏移，可以移动表格，一行，单独的一个（默认为left）

valign="top":bottom middle 垂直偏移

rowspan=" "：跨行，跨几行写几，注意，如果你写了三行三列的表格，当你想第一行第一个跨两行时，一定要把编写的第二行第一个的代码删除掉

colspan=" "：跨列

height=" "：高度

width=" "：宽度

cellpadding:单元格文本与边框的距离，是补白，是指单元格内文字与边框的距离

cellspacing:单元格边框间距，两个单元格之间的距离

<table border="1px" width="200px" height="200px" cellspacing="10" cellpadding="20"><tr><td rowspan="2">1-1</td><td>1-2</td><td align="right">b</td></tr><tr><td>2-2</td><td valign="top" align="center">a</td></tr><tr><td>3-1</td><td colspan="2">3-2</td></tr></table>

注意：如果想要简便格式则可以这样写：table[border=1]>caption{Test}+tr*2>td{内容$}*3摁下tab即可

此时会自动生成一个2行3列的表格

$表示数字自增，从1开始，[ ]里面添加样式，+可以理解为相邻同辈选择器，>可以理解为后代选择器，后面CSS会讲到

其实一个完整的表格由：caption（标题)、thead（表头）、tbody（表体）和tfoot（表尾）四部分组成，我们一般将th写在表头里，信息写在表体里，附加信息写在表尾

<table border="1" width="600" align="center"><caption>Test</caption><thead><tr><th>1</th><th>2</th><th>3</th><th>4</th></tr></thead><tbody><tr><td align="center">1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr><tr><td align="center">2-1</td><td>2-2</td><td>2-3</td><td></td></tr><tr><td align="center">3-1</td><td>3-2</td><td>3-3</td><td></td></tr></tbody><tfoot><tr><td colspan="4">批注</td></tr></tfoot>
</table>