004+limou+HTML——(4)HTML表格

000、前言

表格在实际开发中的应用还是比较多的,表格可以更加清晰地排列数据

001、基本结构

(1)构成

  • 表格:
  • 行:
  • (table row,表格行),由多少组tr标签,就有多少行
  • 单元格:/(table data cell,表格单元格)
  • (2)代码

    DOCTYPE html>
    <html>
        <head>
            <meat charset="utf-8"/>
            <title>网页标题title>
        head>
    
        <body>
            <h1>网页标题1h1>
    
            <table>
                <tr>
                    <td>单元格1td>
                    <td>单元格2td>
                tr>
                <tr>
                    <td>单元格3td>
                    <td>单元格4td>
                tr>
            table>
    
            <h1>网页标题2h1>
        body>
    html>
    

    004+limou+HTML——(4)HTML表格_第1张图片

    (3)使用CSS进行优化(CSS以后学习,这里只是单纯让表格更加直观,因为默认情况下表格是没有边框的)

    (3)使用CSS进行优化(CSS以后学习,这里只是单纯让表格更加直观,因为默认情况下表格是没有边框的)
    
    DOCTYPE html>
    <html>
        <head>
            <meat charset="utf-8"/>
            <title>网页标题title>
            
            <style type="text/css">
                table,tr,td{border:1px solid silver;}
            style>
        head>
    
        <body>
            <h1>网页标题1h1>
    
            <table>
                <caption>表格标题1caption>
                <tr>
                    <td>单元格1td>
                    <td>单元格2td>
                tr>
                <tr>
                    <td>单元格3td>
                    <td>单元格4td>
                tr>
            table>
    
            <h1>网页标题2h1>
    
            <table>
                <caption>表格标题2caption>
                <tr>
                    <td>单元格1td>
                    <td>单元格2td>
                tr>
                <tr>
                    <td>单元格3td>
                    <td>单元格4td>
                tr>
            table>
    
        body>
    html>
    

    004+limou+HTML——(4)HTML表格_第2张图片

    002、完整结构

    除了上面的基本架构,还有一些其他表格会用到的标签

    (1)表标题:

    • 一般来说一个表格只有一个表头,默认情况下,caption标签位于表格的第一行

    (2)表头单元格:

    • 单元格其实有两种:
      • 表头单元格:(table header cell,表头单元格)
      • 表行单元格:
    • 两者都是单元格,但是不可以进行互换使用
      • 表头单元格会用“粗体”、“居中”来显示th里的内容,但是td不会
      • 两者的语义不一样,调试不一样
    DOCTYPE html>
    <html>
        <head>
            <meat charset="utf-8"/>
            <title>网页标题title>
            
            <style type="text/css">
                table,tr,td{border:1px solid silver;}
            style>
        head>
    
        <body>
            <h1>网页标题1h1>
            <table>
                <caption>表格标题1caption>
                <tr>
                    <th>表头单元格01th>
                    <th>表头单元格02th>
                tr>
                <tr>
                    <td>单元格1td>
                    <td>单元格2td>
                tr>
                <tr>
                    <td>单元格3td>
                    <td>单元格4td>
                tr>
            table>
    
            <h1>网页标题2h1>
            <table>
                <caption>表格标题2caption>
                <tr>
                    <th>表头单元格01th>
                    <th>表头单元格02th>
                tr>
                <tr>
                    <td>单元格1td>
                    <td>单元格2td>
                tr>
                <tr>
                    <td>单元格3td>
                    <td>单元格4td>
                tr>
            table>
        body>
    html>
    

    004+limou+HTML——(4)HTML表格_第3张图片

    003、语义化后完整的表格语法,上述的东西可以直接整合为下面这个code

    为了更好语义化,HTML还引入了、、三个标签,使得逻辑更加清晰,调试更加方便,并且方便分块来控制表格的CSS样式

    DOCTYPE html>
    <html>
        <head>
            <meat charset="utf-8"/>
            <title>表格语义化完整语法title>
            
            <style type="text/css">
                table,tr,td{border:1px solid silver;}
            style>
        head>
    
        <body>
            <table>
                <caption>表格标题caption>
                
                <thead>
                    <tr>
                        <th>表头单元格th>
                        <th>表头单元格th>
                        <th>表头单元格th>
                    tr>
                thead>
                
                <tbody>
                    <tr>
                        <td>表行单元格td>
                        <td>表行单元格td>
                        <td>表行单元格td>
                    tr>
                    <tr>
                        <td>表行单元格td>
                        <td>表行单元格td>
                        <td>表行单元格td>
                    tr>
                    <tr>
                        <td>表行单元格td>
                        <td>表行单元格td>
                        <td>表行单元格td>
                    tr>
                tbody>
                
                <tfoot>
                    <tr>
                        <td>标准单元格td>
                        <td>标准单元格td>
                        <td>标准单元格td>
                    tr>
                tfoot>
            table>
        body>
    html>
    

    004、合并属性,即:合并行[rowspan]/合并列:[colspan]

    (1)概念

    这个类似word的表格合并,rowspan可以将单元格合并

    (2)具体语法

    (3)具体代码

    DOCTYPE html>
    <html>
        <head>
            <meat charset="utf-8"/>
            <title>表格语义化完整语法title>
            
            <style type="text/css">
                table,tr,td{border:1px solid silver;}
            style>
        head>
    
        <body>
            <table>
                <caption>表格标题caption>
                
                <thead>
                    <tr>
                        <th>表头单元格th>
                        <th>表头单元格th>
                        <th>表头单元格th>
                    tr>
                thead>
                
                <tbody>
                    <tr>
                        <td rowspan="2">表行单元格td>
                        <td>表行单元格td>
                        <td>表行单元格td>
                    tr>
                    <tr>
                        <td>表行单元格td>
                        <td>表行单元格td>
                    tr>
                    <tr>
                        <td colspan="2">表行单元格td>
                        <td>表行单元格td>
                    tr>
                tbody>
                
                <tfoot>
                    <tr>
                        <td>标准单元格td>
                        <td>标准单元格td>
                        <td>标准单元格td>
                    tr>
                tfoot>
            table>
        body>
    html>
    

    004+limou+HTML——(4)HTML表格_第4张图片

    你可能感兴趣的:(HTML学习笔记,html,css,前端)