HTML表格

表格基本语法与结构

• <table>表格
• <tr> 行
• <td>单元格

创建表格首先写table标签，table内嵌套tr，tr内再嵌套td标签。
表格结构：

<table>
        <tr>
              <td>
              </td>
        </tr>
 </table>

1-3 编程练习

<table border="1">
     <tr>
        <td>上午</td>
        <td>下午</td>
     </tr>
     <tr>
        <td>语文</td>
        <td>英语</td>
     </tr>
    <tr>
        <td>数字</td>
        <td>历史</td>
     </tr>
</table>

• 使用 <caption></caption>定义表格标题，必须紧随table之后，内容居中显示。每一个表格只能定义一个标题。
• 使用<th></th>定义表格的表头,表头内容默认居中、加粗显示。
• td定义普通单元格，内容默认居左，内容不会加粗

<table>
   <caption>...</caption>
   <tr>
       <th>...</th> 
   </tr>  
   <tr> 
        <td>...</td>
    </tr>
</table>

浏览器在解析表格时，表格作为一个整体进行解析的，全部解析完内容才能显示，使用表格结构标签进行优化显示。
带结构的表格

• 表格划分三部分：
  thead：表格的头（放表格的表头）
  tbody：表哥的主题（放数据本体）
  tfoot：表格的脚（放表格的脚注）
  三个标签不会影响表格的布局，顺序使用随意，通常建议三个标签同时存在。

<table>
   <caption>...</caption>
      <thead>
         <tr>
             <th>表头</th> 
         </tr>   
      </thead>
       <tbody>
          <tr>
             <td>主体</td>
          </tr>
       </tbody>
       <tfoot>
          <tr>
             <td>脚注</td>
          </tr>
       </tfoot>

</table>

table表格的属性

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

表格嵌套

image.png