码迷,mamicode.com
首页 > Web开发 > 详细

html表格的基本用法

时间:2017-06-17 10:11:31      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:min   submit   color   不显示   val   跨行   边框   html表格   for   

表格的基本用法

   1<!DOCTYPE html><html><head lang="en">

    <meta charset="UTF-8">

    <title>表格的使用</title></head><body><!--

border:表格的边框

cellspacing:单元格之间的距离

cellpadding:单元格与内容之间的距离

width:代表表格在整个浏览器中的宽度显示

bgcolor:表格的背景色

align:表格中内容的对齐方式-->

   <table  border="1" cellspacing="0" cellpadding="5" width="100%" bgcolor="#ffc0cb">

       <tr  align="center">

           <td>1行第1列</td>

           <td>1行第2列</td>

           <td>1行第3列</td>

           <td>1行第4列</td>

       </tr>

       <tr align="center">

           <td>2行第1列</td>

           <td>2行第2列</td>

           <td>2行第3列</td>

           <td>2行第4列</td>

       </tr>

   </table>

</body></html>

2、<!DOCTYPE html><html><head lang="en">

    <meta charset="UTF-8">

    <title>高级表格的使用</title></head><body>

 <table width="80%" cellspacing="0" cellpadding="0" border="1">

     <!--标题-->

 <caption>年终数据报表</caption>

    <!--页眉-->

     <thead bgcolor="yellow">

     <!--表头-->

     <tr>

         <th>月份</th>

         <th>收入</th>

     </tr>

     </thead>

     <!--主体-->

     <tbody bgcolor="pink">

     <tr>

         <td>1</td>

         <td>1000</td>

     </tr>

     <tr>

         <td>2</td>

         <td>2000</td>

     </tr>

     <tr>

         <td>3</td>

         <td>3000</td>

     </tr>

     <tr>

         <td>4</td>

         <td>4000</td>

     </tr>

     </tbody>

     <!--页脚-->

     <tfoot bgcolor="green">

     <tr>

         <td>平均月收入</td>

         <td>4000</td>

     </tr>

     <tr>

         <td>总计</td>

         <td>40000</td>

     </tr>

     </tfoot>

 </table></body></html>

3、跨行和跨列

<!DOCTYPE html><html><head lang="en">

    <meta charset="UTF-8">

    <title>表格的跨行跨列</title></head><body><!-- 跨行和跨列 只能在 列中td使用-->

 <table width="80%" cellspacing="0" cellpadding="0" border="1">

     <tr>

         <!--学生成绩跨了3列-->

         <td colspan="3">学生成绩</td>

     </tr>

     <tr>

         <!--张三跨了2行-->

         <td rowspan="2">张三</td>

         <td>语文</td>

         <td>85</td>

     </tr>

     <tr>

         <td>数学</td>

         <td>85</td>

     </tr>

     <tr>

         <td rowspan="2">李四</td>

         <td>语文</td>

         <td>85</td>

     </tr>

     <tr>

         <td>数学</td>

         <td>85</td>

     </tr>

 </table></body></html>

4iframe内联框架

<!DOCTYPE html><html><head lang="en">

    <meta charset="UTF-8">

    <title>内联框架</title></head><body><!--

src:需要引入的文件路径

frameborder:是否显示边框   0  不显示   1 显示

scrolling:是否显示下拉框 auto   no  yes

align:根据周围的元素 这是位置

srcdoc:在内联框架中显示html内容

seamless:默认不显示边框和下拉框

name:内联框架的名称-->

<iframe src="http://www.baidu.com"   srcdoc="<h1>哈哈</h1>"  align="top">

</iframe>

<iframe src="http://www.baidu.com" seamless="seamless"></iframe>

</body></html>

二、HTML5中的一些基本属性

<!DOCTYPE html><html><head lang="en">

    <meta charset="UTF-8"></head><body><form action="#" method="post">

 

    <input type="number" min="1" max="5">

    <input type="date" min="1990-01-01">

    <input type="date" max="2016-12-09">

    <input type="time" value="14:43">

    <input type="email">

    <button type="submit">提交</button></form>

</body></html>

html表格的基本用法

标签:min   submit   color   不显示   val   跨行   边框   html表格   for   

原文地址:http://www.cnblogs.com/HHR-SUN/p/7039273.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!