每个表格都是由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
这样是一行三列:
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
这样是二行三列
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr></table>
border="1" 是边框的意思,1是最基本的边框。数字越大边框越粗。
不希望显示边框输入0就可以了。
<table border="1">
<caption>表格的标题</caption>
<tr>
<th>表头<th>
<td>单元格</td>
</tr>
<tr>
<th>表头</th>
<td>单元格</td>
</tr>
</table>
<th></th>这是表格的表头字体比较粗。用上面这种方式可以写垂直表格。
<caption></caption>表格标题的意思,在表格的正上方
<table border="1"> ,<table border="1">
<tr> <tr>
<th>姓名</th> <th>姓名</th>
<th colspan="2">电话</th> <td>金正恩</td>
</tr> </tr>
<tr> <tr>
<td>金正恩</td> <th rowspan="2">电话</th>
<td>38 38 383</td> <td>38 38 383</td>
<td>38 38 383</td> </tr>
</tr> <tr>
</table> <td>38 38 383</td>
</tr>
</table>
以上是两种表格的对比,colspan的意思是合并单元格,"2"的意思是占据2行
rowspan的意思是行,“2”同样是占据两行的意思,需要注意的是另td要用tr写一行才不会超过边框。
<table border="1">
<tr>
<td>
<p>表格里面可以放段落</p>
</td>
<td>表格里面还可以放表格
<table border="1">
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d<td>
</tr>
</table>
</td>
</tr>
<tr>
<td>表格里面还可以放列表
<ol>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>东</li>
</ol>
</td>
<td><a href=http://www.baidu.com>表格真的非常大。</a><td>
</tr>
</table>
看得我都头晕了。下次还是用HTML格式写。表格可以容纳很多东西。
<!doctypy html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <table border="1" cellpadding="10"> <tr> <td>第一</td> <td>排</td> </tr> <tr> <td>第二</td> <td>排</td> </tr> </table> </body> </html>
border是边框的意思,调节外部边框大小。cellpadding是补白的意思,可以调节单元格和文字之间的距离,设置之后可以增加点美观。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>如何添加单元格之间的距离</title> </head> <body> <table border="1" cellspacing="10" > <tr> <td>第一</td> <td>排</td> </tr> <tr> <td>第二</td> <td>排</td> </tr> </table> </body> </html>
cellspacing就是用来调解单元格与单元格之间的距离。
<!doctype html> <html> <head> <meat charset="utf-8"> <title>图片颜色与图片背景</title> </head> <body> <table border="1" cellpadding="15" style="background:url(./images/图片.jpg) no-repeat scroll 0 0 red;" > <tr> <td>春</td> <td>夏</td> </tr> <tr> <td>秋</td> <td>冬</td> </tr> </table> </body> </html>
这个我采用了css的格式写的一个表格颜色与背景的形式style表示定义样式,用处比较多
background:url(./images/图片.jpg) 这个括号要写进去,里面是我图片的一个位置
no-repeat scroll 0 0 red 是颜色的背景,如果只需要颜色不要背景用bgcolor=“颜色”
2种可以放在一起,只需要一种删除掉另一种就可以了。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>每月消费表</title> </head> <body> <table border="1" width="400"> <tr> <th align="left">消费项目</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">衣服</td> <td align="right">¥251.10</td> <td align="right">¥51.10</td> </tr> <tr> <td align="left">生活用品</td> <td align="right">¥210.10</td> <td align="right">¥80.10</td> </tr> <tr> <td align="left">食物</td> <td align="right">¥600.10</td> <td align="right">¥730.10</td> </tr> <tr> <th align="left">总计</th> <th align="right">1061.30</th> <th align="right">861.30</th> </tr> </table> </body> </html>
width是宽度的意思,在表格头部写入。
align是对齐的意思,left是向左对齐,right是向右对齐。
这样看起来就有顺序,不会乱七八糟了。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>可移动的框架</title> </head> <body> <p>”frame“属性来控制围绕表格的边框</p> <table frame="box"> <tr> <th>姓名</th> <th>零花钱</th> </tr> <tr> <td>金正恩</td> <td>¥100</td> </tr> </table> <p>box是完整的框架的属性值</p> <table frame="above"> <tr> <td>普京</td> <td>¥100</td> </tr> <tr> <td>奥巴马</td> <td>¥100</td> </tr> </table> <p>above是框架在上的意思</p> <table frame="below"> <tr> <td>叶良辰</td> <td>¥100</td> </tr> <tr> <td>王思聪</td> <td>¥100</td> </tr> </table> <p>below是框架在下的意思</p> <table frame="hsides"> <tr> <td>罗玉凤</td> <td>¥100</td> </tr> <tr> <td>犀利哥</td> <td>¥100</td> </tr> </table> <p>hsides是上下两框架的意思</p> <table frame="vsider"> <tr> <td>至尊宝</td> <td>¥100</td> </tr> <tr> <td>紫霞</td> <td>¥100</td> </tr> </table> <p>vsider是框架在左右的意思</p> </body> </html>