HTML表格概念、语法、操作、案例

创建两行三列表格

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

    <table border="1">
        <tr>
            <td>2018年td>
            <td>2019年td>
            <td>2020年td>
        tr>
        <tr>
            <td>8000td>
            <td>10000td>
            <td>120000td>
        tr>
    table>
body>
html>

HTML表格概念、语法、操作、案例_第1张图片

 

 

表格
th 表头,内容居中,加粗显示
表格标题,居中显示


 

表格作为整体被解析,完全解析完才会被显示出来
表格结构标签可以优化显示,加载一部分显示一部分
thead 表格的头(表头)
tbody 表格的主体(数据)
tfoot 表格的脚(脚注)


 

表格属性

HTML表格概念、语法、操作、案例_第2张图片

 

 HTML表格概念、语法、操作、案例_第3张图片

 

 HTML表格概念、语法、操作、案例_第4张图片

 

 

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

    <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="rows">
        <caption>前端工程师平均工资caption>
        <thead>
            <tr>
                <th>城市th>
                <th>2018年th>
                <th>2018年th>
                <th>2019年th>
                <th>2020年th>
            tr>
            <tr>
                <th>城市th>
                <th>上半年th>
                <th>下半年th>
                <th>2019年th>
                <th>2020年th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>北京td>
                <td>8000td>
                <td>9000td>
                <td>10000td>
                <td>120000td>
            tr>
            <tr>
                <td>上海td>
                <td>6000td>
                <td>7000td>
                <td>8000td>
                <td>100000td>
            tr>
        tbody>
        <tfoot>
            <tr>
                <td>合计td>
                <td>7000td>
                <td>8000td>
                <td>9000td>
                <td>110000td>
            tr>
        tfoot>
    table>
body>
html>

HTML表格概念、语法、操作、案例_第5张图片

 

 tr标签属性

HTML表格概念、语法、操作、案例_第6张图片

 

 td和th标签属性

HTML表格概念、语法、操作、案例_第7张图片

 

 thead / tbody / tfoot 标签属性

HTML表格概念、语法、操作、案例_第8张图片

 

 

跨列属性 colspan
跨行属性 rowspan

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

    <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="all">
        <caption>前端工程师平均工资caption>
        <thead>
            <tr bgcolor="#d8e4bc">
                <th rowspan="2">城市th>
                <th colspan="2">2018年th>

                <th rowspan="2">2019年th>
                <th rowspan="2">2020年th>
            tr>
            <tr bgcolor="#d8e4bc">
                
                <th>上半年th>
                <th>下半年th>

            tr>
        thead>
        <tbody align="center" valign="middle">
            <tr>
                <td bgcolor="#b8cce4">北京td>
                <td>8000td>
                <td>9000td>
                <td>10000td>
                <td>12000td>
            tr>
            <tr>
                <td bgcolor="#b8cce4">上海td>
                <td>6000td>
                <td>7000td>
                <td>8000td>
                <td>10000td>
            tr>
        tbody>
        <tfoot>
            <tr align="center">
                <td bgcolor="#b8cce4">合计td>
                <td>7000td>
                <td>8000td>
                <td>9000td>
                <td>11000td>
            tr>
        tfoot>
    table>
body>
html>

HTML表格概念、语法、操作、案例_第9张图片

 

 

表格嵌套:
嵌入的必须是完整的表格结构
放到td标签中

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

    <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="all">
        <caption>前端工程师平均工资caption>
        <thead>
            <tr bgcolor="#d8e4bc">
                <th>城市th>
                <th>2018年th>
                <th>2019年th>
                <th>2020年th>
            tr>
        thead>
        <tbody align="center" valign="middle">
            <tr>
                <td bgcolor="#b8cce4">北京td>
                <td>
                    <table border="1" cellspacing="0" frame="void">
                        <tr>
                            <td>上半年td>
                            <td>下半年td>
                        tr>
                        <tr>
                            <td>8000td>
                            <td>9000td>
                        tr>
                    table>
                td>
                <td>10000td>
                <td>12000td>
            tr>
        tbody>
    table>
body>
html>

HTML表格概念、语法、操作、案例_第10张图片

 

你可能感兴趣的:(HTML表格概念、语法、操作、案例)