HTML 排版与标签(四)

清单标签


清单标签分为3种:
1、无序清单(

    记忆unorderlist)默认有小圆点
    属性:type 取值:disc(圆点) circle(空心圆) square(方形)
    2、有序清单(
      记忆orderlist)默认数字排序
      属性:type 取值 1,a,A,i,I
         start
      3、定义清单(
      记忆definelist)
      使用
      (清单标题)标签和
      (清单项)
      HTML 排版与标签(四)_第1张图片

      HTML 排版与标签(四)_第2张图片

      表格标签

      表格标签使用

      table: 表格

                   属性:border:边框
                     width:宽度
                     height:高度
                     align:表格的对齐方式
                     cellpadding:单元格内容到边的距离
                     cellspacing:单元格和单元格之间的距离
                     bgcolor:背景颜色
                      background:背景图片
                       bordercolorlight:表格的上,左边框,以及单元格的右,下边框的颜色
                      bordercolordark: 表格的右,下边框,以及单元格上,左的边框的颜色
                      dir:单元格内容的排列方式 取值:ltr 从左到右, rtl:从右到左
                      tr: 行
                        bgcolor:背景颜色
                       td: 列
      

      单元格

            属性:
             align: 内容的横向对齐方式
             valign: 内容的纵向对齐方式 top,middle,bottom
             width: 绝对值或者相对值(%)
             height:单元格的高度
      

      单元格的合并:

      单元格的属性:
      colspan: 横向合并
      rowspan: 纵向合并
      th: 相当于

      + 文本加粗
      caption: 表格的标题
      属性:align: 取值:left,center,right,top,bottom
      thead、tbody、tfoot三者写与不写的区别:
      1. 当表格非常大的时候,如果不写,则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话,那么边下载边显示。
      2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了,那么顺序任意,浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容
      HTML 排版与标签(四)_第3张图片

       <table  border="2" width="200" height="200" align="center"  cellpadding="20"  cellspacing="10"  bordercolordark="red"  bordercolor="blue"  bgcolor="#f0ffcc"  background="#00f" dir="rtl">
       <thead>thead>
          <caption align="bottom">表格标题caption>
           <tr bgcolor="#00ff00" >        
              <td  bgcolor="red">水果td>
           <td align="center">数量td>
           tr>
             <tr>
             <th valign="top" >苹果th>
             <td>3td>
             tr>
             <tr>
              <td rowspan="2">橙子td>
             <td>4td>
             tr>
             <tr> 
             <td>4td>
             tr>
       table>
       <table  border="2" width="200" height="200" align="center"  cellpadding="20"  cellspacing="10"  bordercolordark="red"  bordercolor="blue"  bgcolor="#f0ffcc"  ackground="#00f" >
           <thead>  
           <tr bgcolor="#00ff00" >        
              <td  bgcolor="red">水果td>
           <td align="center">数量td>
           thead>
           <tbody>
           tr>
             <tr>
             <th valign="top" >苹果th>
             <td>3td>
             tr>
             <tr>      
               <td colspan="2">4td>
             tr>
              tbody>
              <tfoot>
             <tr> 
              <td >橙子td>
              <td >4td>
             tr>
              <tfoot>
       table>

      你可能感兴趣的:(HTML)