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

HTML表格

时间:2018-11-10 15:13:32      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:http   bubuko   png   doctype   html   ima   pre   com   name   

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

注意,输入是以行来显示的

技术分享图片

 

<td>是输入,<th>是标签,一般会加粗

技术分享图片

 

还有跨行

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>单元格跨两格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

技术分享图片

横着跨,是colspan  竖着跨,是rowspan

也可以格中格

单元格边距:cellpadding       技术分享图片

单元格间距:cellspacing

 

HTML表格

标签:http   bubuko   png   doctype   html   ima   pre   com   name   

原文地址:https://www.cnblogs.com/xudong97/p/9938991.html

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