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

html 表格

时间:2016-10-17 16:37:59      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:表格

表格

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>sij</title>

<link rel="stylesheet" href="">

</head>

<body>

    <!-- 表格 -->

<table border="2px" >

   <!-- 行 -->

<tr>

   <!-- 列 -->

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

<tr border="2px">

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

<tr border="2px">

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

</table>

</body>

</html>

技术分享

表头

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>sij</title>

<link rel="stylesheet" href="">

</head>

<body>

    <!-- 表格 -->

<table border="2px" width="200px" height="300px">

<!-- table head 表头 -->

<tr>

<th>123</th>

<th>123</th>

<th>123</th>

</tr>

   <!-- 行 -->

<tr>

   <!-- 列 -->

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

<tr>

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

<tr>

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

</table>

</body>

</html>

技术分享

3行7列

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<table border="2px" width="400px"

height="500px">

<tr>

<th>123</th>

<th>123</th>

<th>123</th>

<th>123</th>

<th>123</th>

<th>123</th>

<th>123</th>

</tr>

<tr style="text-align:center;">(文字水平居中)

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

<tr style="text-align:center;">

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

<tr style="text-align:center;">

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

</table>

</body>

</html>

技术分享

合并行

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>sij</title>

<link rel="stylesheet" href="">

</head>

<body>

<table border="2px" width="200px" height="300px">

<tr>

<th>123</th>

<th>123</th>

<th>123</th>

<th>123</th>

</tr>

<tr>

<td>123</td>

<td>123</td>

                        <合并行>

<td rowspan="2">123</td>

<td>123</td>

</tr>

<tr>

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

<tr>

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

</table>

</body>

</html>

技术分享

多列合并

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>sij</title>

<link rel="stylesheet" href="">

</head>

<body>

<table border="2px" width="200px" height="300px">

<tr>

<th>123</th>

<th>123</th>

<th>123</th>

<th>123</th>

</tr>

<tr>

   <!--colspan="数量" 多列合并  -->

<td colspan="2">123</td>

<!-- rowspan="数量"  多行合并-->

<td rowspan="2">123</td>

<td>123</td>

</tr>

<tr>

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

<tr>

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

</table>

</body>

</html>

技术分享

表名

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>sij</title>

<link rel="stylesheet" href="">

</head>

<body>

    <!-- 表格 -->

<table border="2px" width="200px" height="300px">

<!-- 表名 -->

<caption><h1>表名</h1></caption>

<!-- table head 表头 -->

<tr>

<th>123</th>

<th>123</th>

<th>123</th>

<th>123</th>

</tr>

<!-- 行 -->

<tr>

    <!-- 列 -->

    <!--colspan="数量" 多列合并  -->

<td colspan="2">123</td>

<!-- <td>123</td> -->

<!-- rowspan="数量"  多行合并-->

<td rowspan="2">123</td>

<td>123</td>

</tr>

<tr>

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

<tr>

<td>123</td>

<td>123</td>

<td>123</td>

<td>123</td>

</tr>

</table>  

</body>

</html>

技术分享

正确格式

<thead></thead>

<tbody></tbody>

可以不写

<!DOCTYPE html>

 <html>

 <head>

  <meta charset="utf-8">

  <title></title>

 </head>

 <body>

  <table border="2px" width="500px" height="400px">

  <caption>表名</caption>

  <thead>

  <tr>

      <th>123</th>

                            <th>123</th>

                            <th>123</th>

                            <th>123</th>

                            <th>123</th>

                            <th>123</th>

  </tr>

  </thead>

  <tbody>

  <tr>

  <td>123</td>

  <td>123</td>

  <td>123</td>

  <td>123</td>

  <td>123</td>

  <td>123</td>

  </tr>

  <tr>

  <td colspan="2">123</td>

  <td colspan="3">123</td>

  <td>123</td>

  </tr>

  </tbody>

  </table>

 </body>

 </html>

技术分享

html 表格

标签:表格

原文地址:http://12155701.blog.51cto.com/12145701/1862569

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