文章目录
1. HTML表格 table 标签2. HTML 列表无序列表有序列表自定义列表1. HTML表格 table 标签
表格由<table>标签定义。每个标签均有若干行，若干列，行由<tr>(table row)定义;列由<td>(table data, 即表格数据)定义,即表格单元格的内容;表头由<th>(table head)定义。
表格单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
<table border="5.5" bordercolor="#f00" bgcolor="#bbb" cellspacing="1" align="middle"><caption>表格属性</caption><thead><tr bgcolor="#f00" align="center"><th>标签</th><th>属性名</th><th>属性取值</th><th>属性描述</th></tr></thead><tbody><colgroup><col style="background-color: yellow"><col span="3" style="background-color:green"></colgroup><tr><th rowspan="8">table</th><td>border</td><td>0、1~无穷</td><td>0表示边框宽度为无</td></tr><tr><td>bordercolor</td><td>"#000"~"#fff"</td><td>边框颜色</td></tr><tr><td>cellspacing</td><td>0、1~无穷</td><td>单元格之间的距离</td></tr><tr><td>cellpadding</td><td>0~</td><td>单元格边距，即边框与文本之间的距离。</td></tr><tr><td>width</td><td>0~</td><td>表格的总宽度，单位是像素</td></tr><tr><td>height</td><td>0~</td><td>表格的总高度</td></tr><tr><td>align</td><td>letf、center、right</td><td>表格整体在整个网页中位置的对齐方式</td></tr><tr><td>bgcolor</td><td>#000~#fff</td><td>表格整体的背景色</td></tr><tr><th rowspan="3">tr</th><td>bgcolor</td><td>#000~#fff</td><td>行的颜色</td></tr><tr><td>align</td><td>left、right、center</td><td>行内文字的水平对齐方式</td></tr><tr><td>valign</td><td>top、middle、bottom</td><td>行内文字的垂直对齐方式</td></tr><tr><th rowspan="7">td、th</th><td>width</td><td>0~,单位为像素</td><td>单元格的宽度，设置后对当前一列的单元格都有影响</td></tr><tr><td>height</td><td>0~，单位为像素</td><td>单元格的高度，设置后对当前一行的单元格都有影响</td></tr><tr><td>bgcolor</td><td>#000~#fff</td><td>单元格的背景色</td></tr><tr><td>align</td><td>left、center、right</td><td>单元格文字的水平对齐方式 </td></tr><tr><td>rowspan</td><td>1~</td><td>合并垂直方向的单元格</td></tr><tr><td>colspan</td><td>1~</td><td>合并水平方向单元格</td></tr><tr><td>valign</td><td>middle、bottom、top</td><td>单元格文字的垂直对齐方式</td></tr></tbody><tfoot><tr><td colspan="4" bgcolor="#088">HTML中的table可以分为三个部分thead:表格的页眉;tbody:表格的主体;tfoot:表格的页脚;</td></tr></tfoot></table>
2. HTML 列表
HTML 支持有序、无序和自定义列表。
无序列表
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body><h4>圆点列表</h4><ul style="list-style-type: disc"><li>水果</li><li>蔬菜</li><li>肉类</li></ul><h4>圆圈列表</h4><ul style="list-style-type: circle;"><li>华为</li><li>vivo</li></ul><h4>正方形列表</h4><ul style="list-style-type: square;"><li>主卧</li><li>厨房</li></ul><h4>嵌套列表</h4><ul><li>台式电脑</li><ul><li>显示器</li><ul><li>线路</li></ul></ul></ul></body></html>
运行结果：
有序列表
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body><h4>有序列表</h4><ol><li>第一</li><li>第二</li></ol><ol start="50"><li>第五十</li><li>第五十一</li></ol><h4>在单元格中嵌入列表，并用不同类别的序列符号</h4><table border="5" bordercoloer="#bbb"><ol><li>第一</li><li>第二</li><ol type="A"><li>西瓜</li><li>桔子</li><li>哈蜜瓜</li><li>草莓</li><ol type="I"><li>羊肉</li><li>牛肉</li><li>猪肉</li><ul><li>无序，</li><li>无序，</li><li>无序，</li></ul> </ol></ol></ol></table></body></html>
运行结果：
自定义列表
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body><h4>一个自定义列表</h4><dl><dt>自定义列表项目一</dt><dd>——自定义列表项目一描述</dd><dt>自定义列表项目二</dt><dd>——自定义列表项目二描述</dd></dl></body></html>
运行结果：
