HTML5(八)结构标签、列格式化标签、合并表格

表格系列标签当中包含有三个表示表格结构的标签,分别是thead表示表格的头部,tfoot用来表格表格的注脚,tbody用来表示表格的身体。
例子:


<html>
<head>
    <meta charset="UTF-8">
    <title>TABLE02title>
head>
<body>
    
    <table border="1">
    
        <thead>
            
            <th>姓名th>
            <th>语文th>
            <th>数学th>
        thead>
        
        <tfoot>
            <tr>
                <td>平均td>
                <td>70td>
                <td>80td>
            tr>
        tfoot>
        
        <tbody>
            <tr>
                <td>张三td>
                <td>60td>
                <td>70td>
            tr>
            <tr>
                <td>李四td>
                <td>80td>
                <td>90td>
            tr>
        tbody>
    table>
body>
html>

HTML5(八)结构标签、列格式化标签、合并表格_第1张图片

列格式化标签的作用是可以将一个表格当中的列进行分组,同时还可以对这些类进行格式上的设置,比如说设置背景颜色、对齐方式和字体等等

列格式化标签一共有两个,分别是col和colgroup标签,前者是后者的子标签。colgroup标签用于将表格当中的列分组,并为不同的组指定不同的样式

<body>
    
    <table border="1">
        

        

        
        <colgroup style="background:red">colgroup>
        <colgroup style="background:green">
            <col>col>
            <col>col>
        colgroup>
        
        <thead>
            
            <th>姓名th>
            <th>语文th>
            <th>数学th>
        thead>
        
        <tfoot>
            <tr>
                <td>平均td>
                <td>70td>
                <td>80td>
            tr>
        tfoot>
        
        <tbody>
            <tr>
                <td>张三td>
                <td>60td>
                <td>70td>
            tr>
            <tr>
                <td>李四td>
                <td>80td>
                <td>90td>
            tr>
        tbody>
    table>
body>

HTML5(八)结构标签、列格式化标签、合并表格_第2张图片


合并单元格
HTML5(八)结构标签、列格式化标签、合并表格_第3张图片

<tfoot>
            <tr>
                <td>平均td>
                <td>70td>
                <td>80td>
            tr>
            <tr>
                <td>总平均分td>
                <td colspan="2">80td>
            tr>
tfoot>

HTML5(八)结构标签、列格式化标签、合并表格_第4张图片


合并列 80

<tfoot>
            <tr>
                <td>平均td>
                <td>70td>
                <td rowspan="2">80td>
            tr>
            <tr>
                <td>总平均分td>
                <td colspan="2">80td>
            tr>
        tfoot>

HTML5(八)结构标签、列格式化标签、合并表格_第5张图片

你可能感兴趣的:(Mars-HTML)