html常见标签总结2

1、表格标签

html常见标签总结2_第1张图片
表格属性:

  • border : 表格边框 写在table标签里面,数值代表边框像素

  • cellpadding : 单元格内的空间 写在table标签里面,数值代表空间像素

  • cellspacing : 单元格之间的空间 写在table标签里面,数值代表空间像素

  • rowspan : 合并行 【具体见下面总结,span v. 贯穿;包括】

  • colspan : 合并列

  • align : 左右对齐方式(right、left、center)

  • 代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图表标签title>
head>
<body>
    <table>
        <caption>天气预报caption>
        <tHead>
            <tr>
                <th>时间th>
                <th>天气th>
                <th>出行建议th>
            tr>
        tHead>
        <tBody>
            <tr>
                <td>2022-1-2td>
                <td><img src="./大雪.png" width=30 height="30">td>
                <td>注意防寒td>
            tr>
            <tr>
                <td>2022-1-3td>
                <td><img src="./小雨.png" width=30 height="30">td>
                <td>注意带伞td>
            tr>
            <tr>
                <td>2022-1-4td>
                <td><img src="./烈日.png" width=30 height="30">td>
                <td>注意防嗮td>
            tr>
        tBody>
        <tFood>
            <tr>
                <td>表格页脚td>
                <td>表格页脚td>
                <td>表格页脚td>
            tr>
        tFood>
    table>
body>
html>
  • 结果展示
    html常见标签总结2_第2张图片

2、表格练习

  • 代码
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签练习title>
head>
<body>
    <table border="1" cellspacing="0" cellpadding="5" align="center">
        <tHead>
            <tr bgcolor="#F4F8F4">
                <th align="center" width="140">班级名称th>
                <th align="center" width="140">科目th>
                <th align="center" width="140">授课内容th>
                <th align="center" width="140">增值服务th>
                <th align="center" width="70">课时th>
                <th align="center" width="100">价格th>
                <th align="center" width="140">试听th>
                <th align="center" width="140">购买th>
            tr>
        tHead>
        <tBody>
            <tr>
                <td align="center" rowspan="3"><strong>真题精解班strong>td>
                <td align="center">行测+申论td>
                <td align="center">全科历年真题精解td>
                <td align="center" rowspan="3">课后赠2套模拟卷24小时以内答疑td>
                <td align="center">48td>
                <td align="center"><font color="red">1280元font>td>
                <td align="center"><img src="./试听.png" width="30" height="30">td>
                <td align="center"><img src="./购物.png" width="30" height="30">td>
            tr>
            <tr>
                
                <td align="center">行测td>
                <td align="center">行测历年真题精解td>
                
                <td align="center">32td>
                <td align="center">980元td>
                <td align="center"><img src="./试听.png" width="30" height="30">td>
                <td align="center"><img src="./购物.png" width="30" height="30">td>
            tr>
            <tr>
                
                <td align="center">申论td>
                <td align="center">申论历年真题精解td>
                
                <td align="center">16td>
                <td align="center" color='red'>580元td>
                <td align="center"><img src="./试听.png" width="30" height="30">td>
                <td align="center"><img src="./购物.png" width="30" height="30">td>
            tr>
            
            <tr>
                <td align="center" rowspan="3"><strong>高分技巧班strong>td>
                <td align="center">行测+申论td>
                <td align="center">全科技巧强化td>
                <td align="center" rowspan="3">入学试卷测评24小时以内答疑td>
                <td align="center">32td>
                <td align="center"><font color="red">980元font>td>
                <td align="center"><img src="./试听.png" width="30" height="30">td>
                <td align="center"><img src="./购物.png" width="30" height="30">td>
            tr>
            <tr>
                
                <td align="center">行测td>
                <td align="center">行测速解技巧强化td>
                
                <td align="center">18td>
                <td align="center">680元td>
                <td align="center"><img src="./试听.png" width="30" height="30">td>
                <td align="center"><img src="./购物.png" width="30" height="30">td>
            tr>
            <tr>
                
                <td align="center">申论td>
                <td align="center">申论速解技巧强化td>
                
                <td align="center">14td>
                <td align="center">580元td>
                <td align="center"><img src="./试听.png" width="30" height="30">td>
                <td align="center"><img src="./购物.png" width="30" height="30">td>
            tr>
        tBody>
    table>
body>
html>

  • 结果展示
    html常见标签总结2_第3张图片

  • 总结:

    • 写表格很难理解的是合并行和列,简单的方法是,先写出没有合并之前的样子,然后再写要合并的,同时删掉被合并的语句。

你可能感兴趣的:(web前端,html,前端)