HTML5-3-表格

文章目录

  • 属性
  • 边框属性
  • 标题
  • 跨行和跨列
  • 单元格边距

HTML 表格由 标签来定义。

  • tr:tr 是 table row 的缩写,表示表格的一行。
  • td:td 是 table data 的缩写,表示表格的数据单元格。
  • th:th 是 table header的缩写,表示表格的表头单元格。
<table>
     <tr>
         <td>单元格1td>
         <td>单元格2td>
     tr>
     <tr>
         <td>单元格3td>
         <td>单元格4td>
     tr>
table>

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

thead、tbody和tfoot这3个标签。将表格划分为3部分:表头、表身、表脚。

用于定义表格的标题部分: 在 中,使用 用于定义表格的主体部分: 在 中,使用 元素定义行,并在每行中使用
元素定义列的标题
  • 元素定义单元格数据
    <table> 
        <caption>表格标题caption>
        
        <thead>
            <tr> 
               <th>表头单元格1th>
               <th>表头单元格2th>
            tr>
        thead>
        
        <tbody>
           <tr>
              <td>表行单元格1td>
              <td>表行单元格2td>
           tr>
        tbody>
        
        <tfoot>
           <tr>
              <td>标准单元格5td>
              <td>标准单元格6td>
           tr>
        tfoot>
    table>
    

    表脚往往用于统计数据。此外,thead、tbody和tfoot标签除了可以使代码更具有语义,还有另外一个重要作用 :方便分块来控制表格的CSS样式。

    属性

    在 HTML5 中,仅支持 “border” 属性,并且只允许使用值 “1” 或 “”。

    属性 描述
    align left,center,right 不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
    bgcolor rgb(x,x,x),#xxxxxx,colorname 不赞成使用。请使用样式代替。规定表格的背景颜色。
    border pixels 规定表格边框的宽度。
    cellpadding pixels,% 规定单元边沿与其内容之间的空白。
    cellspacing pixels,% 规定单元格之间的空白。
    frame void,above,below,hsides,lhs,rhs,vsides,box,border 规定外侧边框的哪个部分是可见的。
    rules none,groups,rows,cols,all 规定内侧边框的哪个部分是可见的。
    summary text 规定表格的摘要。
    width %,pixels 规定表格的宽度。

    边框属性

    <table border="1">
        <tr>
            <td>第一行, 第一列td>
            <td>第一行, 第二列td>
        tr>
    table>
    

    在这里插入图片描述
    没有边框的表格:

    <table>
        <tr>
            <td>第一行, 第一列td>
            <td>第一行, 第二列td>
        tr>
    table>
    

    在这里插入图片描述

    标题

    <table border="4">
    	<caption>标题caption>
    	<tr>
    	  <td>第一行, 第一列td>
    	  <td>第一行, 第二列td>
    	tr>
    table>
    
    

    HTML5-3-表格_第1张图片

    跨行和跨列

    rowspan,colspan

    <td rowspan="跨域的行数">td>
    <td colspan="跨域的列数">td>
    

    删除的个数=合并的个数-1

    DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>表格合并title>
    head>
    <body>
    	<table  width="200"border="1">
    		<tr>
    			<td colspan="3">成绩td>
    		tr>
    		<tr>
    		    <td rowspan="2">张三td> 
    			<td>语文:99td>
    			<td>数学:100td>
    		tr>
    		<tr>
    			<td>物理:99td>
    			<td>化学:100td>
    		tr>
    	table>
    body>
    html>
    

    HTML5-3-表格_第2张图片

    单元格边距

    HTML5-3-表格_第3张图片

    你可能感兴趣的:(HTML,html5)