HTML2:列表和表格

列表

有序列表

ordered list ol

无序列表

unordered list ul

定义列表

definition list dl

1,有序列表

每条列表前自带一个序号

2,无序列表

每条列表前自带一个小圆点

3,定义列表

注意:dl中放的不是li列表而是dt列表和dd表项

dt代表术语标题

dd代表术语内容

一个dt可以对应多个dd

表格

table标签

表格组成

表格标题:caption标签

表格头部:thead标签

表格主体:tbody标签

表格脚注:tfoot标签

行:tr标签

表格头单元格:th标签

表格主体单元格:td标签

table属性设置

设置table标签的border属性调整边框宽度

设置width属性调整表格宽度(至少)

设置height属性调整表格高度(表头和脚注不会变)(至少)

设置cellspacing属性调整单元格间距,属性为"0"代表边框没有间距,并非合并边框

thead属性设置

height设置高度

align设置对齐方式 left,right,center...默认center

valign 垂直对齐方式 middle垂直居中,bottom底部对齐

tbody属性设置

同thead

th和td的属性设置

同thead

单元格的跨行和跨列

跨列:
html 复制代码
colspan="n"//跨n列
跨行:
html 复制代码
rowspan="n"//跨n行
简单课程表代码实现
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>课程表</h1>
    <table border="1">
        <caption>表格</caption>
        <thead align="center" valign="middle">
            <tr>
                <th colspan="1">项目</th>
                <th colspan="4">上课</th>
                <th colspan="2">活动和休息</th>
            </tr>
        </thead>
        <tbody align="center" valign="middle">
            <tr>
                <td>周一</td>
                <td>周二</td>
                <td>周三</td>
                <td>周四</td>
                <td>周五</td>
                <td>周六</td>
                <td>周日</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td rowspan="5">7</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                
            </tr>
        </tbody>
        <tfoot align="center" valign="middle">
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
                <td>d</td>
                <td>d</td>
                <td>d</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>
相关推荐
西西学代码5 小时前
Flutter---音效模式选择器
前端·html
键盘不能没有CV键10 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
云知谷14 小时前
【HTML】网络数据是如何渲染成HTML网页页面显示的
开发语言·网络·计算机网络·html
昔人'18 小时前
`tanslate=“no“`避免使用 HTML 中的翻译属性自动翻译品牌名称等
html
执沐19 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html
duandashuaige21 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
勤奋菲菲1 天前
深入理解HTML文本标签:构建网页内容的基础
前端·html
昔人'1 天前
html`<mark>`
前端·javascript·html
snow@li2 天前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
Dragonir2 天前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效