
HTML中的表格由 <table> 标签来定义,表格是由单元格组成的,单元格可以放入文字、、表格等内容。下面,我们来看看如何用HTML来制作表格吧。
01代码,先用<table>标签定义一个表格,其中border表示边框,border="1"表示边框为1个像素,数值越大,边框就越粗。
<table border="1">
</table>
02<tr>元素表示表格中的行,比如创建两行
<tr></tr>表示一行。
03单元格
HTML表格的单元格用<td>标签表示,如下图所示:
<td>语文</td>
04表格
就做好一个HTML表格,显示图如下:
总代码:
<body>
<table border="1">
<tr>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>英语</td>
<td>化学</td>
</tr>
特别提示表格的标签:<table>、<tr>、<td>三个标签。
TABLE自动换行的问题:
数字和英文的时候,TABLE中的TD就会被拉长,不会自动换行了。全角的时候是可以的。用表格做网页排版的时候,一般都能正常使用。偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象:
解决方法
在需要换行的地方加入:
style="table-layout:
fixed;WORD-BREAK:
break-all;
WORD-WRAP:
break-word"
或者
table{table-layout:
fixed;}
td{word-break:
break-all;
word-wrap:break-word;}
参考资料:
css控制表格换行
http://wwwstudyofnetcom/news/237html
html做个表格的步骤如下:
1、首先新建一个html,点击<body></body>中间,先填入表格内容;
2、内容根据需求来写即可,示例代码如下:
<table>
<p style="text-align:center ">功课表</p>
<tr>
<th>语文</th>
<td>7:00-7:40</td>
<td>7:50-8:30</td>
</tr>
<tr>
<th>数学</th>
<td>7:00-7:40</td>
<td>7:50-8:30</td>
</tr>
<tr>
<th>英文</th>
<td>7:00-7:40</td>
<td>7:50-8:30</td>
</tr>
</table>
3、然后在<head></head>中间输入样式表的样式;
4、样式也根据个人的需求来设置即可,设置单元格的宽度高度,合并单元格,位置,颜色等等,示例代码如下:
<style type="text/css">
body
{
width:340px;
height :800px;
}
table
{
border-collapse :collapse ;
}
th,td
{
width:100px;
height:40px;
border :1px solid black;
font-size:12px;
text-align :center;
}
</style>
5、这里需要注意这个代码“table”的意义是将表格边框合并为单一的边框,将相邻变合并。
6、预览结果如下所示,一个简单的表格就制作出来了。
把一下代码直接新建HTML保存,你看下效果。刚写的,有问题再联系我。
<div id="iddiv" style="width:200px;height:200px;overflow:hidden;border: 1px solid blue;">
<table >
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td></tr>
</table>
</div>
asdfaf
<script type="text/javascript">
var id = setTimeout("fnGo()",2000);
function fnGo(){
var div = documentgetElementById("iddiv");
divstyleheight = parseFloat(divstyleheight) + 1;
if( parseFloat(divstyleheight) >= 1000){
clearTimeout(id);
}else{
id = setTimeout("fnGo()",50);
}
}
</script>
table标签定义 HTML 表格,table 由一个或多个 tr、th 或 td 元素组成,tr 元素定义表格的行,th定义表头,td定义表格单元,即展示的内容,下面介绍下如何用HTML做一个表格
01新建一个HTML文件,命名为testTablehtml
02增加table标签,数据展示以省份和省会为例,代码如下
03在代码的空白出右键,选择浏览器打开,选择默认即可
04自动跳转到浏览器,效果如下图
05下面我们为表格增加样式,增加边框等元素,代码如下
06刷新浏览器,最终效果如下
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)