html表格怎么写
1. html做个表格代码
html做个表格的步骤如下:1、首先新建一个html,点击<body>
html做个表格的步骤如下:1、首先新建一个html,点击<body>
中间,先填入表格内容;2、内容根据需求来写即可,示例代码如下:
| 语文 | 7:00-7:40 | 7:50-8:30 |
|---|---|---|
| 数学 | 7:00-7:40 | 7:50-8:30 |
| 英文 | 7:00-7:40 | 7:50-8:30 |
3、然后在
中间输入样式表的样式;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”的意义是将表格边框合并为单一的边框,将相邻变合e68a84e8a2ad3231313335323631343130323136353331333366306530并。
6、预览结果如下所示,一个简单的表格就制作出来了。
可以这么写:
<table border = 1 width = 500>
<tr>
<td rowspan = 7 align = "center">omc12</td>
<td>zbcx1 </td>
<td>5</td>
<td>2013/9/7 0:00</td>
</tr>
<tr>
<td>zbcx1 </td>
<td>4</td>
<td>2013/9/7 0:00</td>
</tr>
<tr>
<td>zbcx1 </td>
<td>6</td>
<td>2013/9/7 0:00</td>
</tr>
<tr>
<td>zbcx1 </td>
<td>8</td>
<td>2013/9/7 0:00</td>
</tr>
<tr>
<td>zbcx1 </td>
<td>3</td>
<td>2013/9/7 0:00</td>
</tr>
<tr>
<td>zbcx1 </td>
<td>2</td>
<td>2013/9/7 0:00</td>
</tr>
<tr>
<td>zbcx1 </td>
<td>1</td>
<td>2013/9/7 0:00</td>
</tr>
<tr>
<td rowspan = 5 align = "center">omc13</td>
<td>zbcx1 </td>
<td>5</td>
<td>2013/9/7 0:00</td>
</tr>
<tr>
<td>zbcx1 </td>
<td>5</td>
<td>2013/9/7 0:00</td>
</tr>
<tr>
<td>zbcx1 </td>
<td>5</td>
<td>2013/9/7 0:00</td>
</tr>
<tr>
<td>zbcx1 </td>
<td>5</td>
<td>2013/9/7 0:00</td>
</tr>
<tr>
<td>zbcx1 </td>
<td>5</td>
<td>2013/9/7 0:00</td>
</tr>
</table>
用到拆分合并单元格,手写挺麻烦的,先用dw在设计视图片实现,然后再返回代码视图,复制即可.代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table width="268" height="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="50" colspan="2" bordercolor="#0000FF"> </td>
<td rowspan="4" bordercolor="#0000FF"><table width="100%" height="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="75" bordercolor="#0000FF"> </td>
</tr>
<tr>
<td height="125" bordercolor="#0000FF"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="50" colspan="2" bordercolor="#0000FF"> </td>
</tr>
<tr>
<td height="50" bordercolor="#0000FF"> </td>
<td height="50" bordercolor="#0000FF"> </td>
</tr>
<tr>
<td height="50" bordercolor="#0000FF"> </td>
<td height="50" bordercolor="#0000FF"> </td>
</tr>
</table>
解释如下:
先插入四行两列的表格,第一列通过合并单元格来实现,第二列将所有单元格合并,然后新插入一个两行一列的表格即可实现上述效果.
<body>
<table>
<tr>
<td>;标题</td>
<td colspan="3"><input type="text" /></td>
</tr>
<tr>
<td>;留言者</td>
<td><input type="text" /></td>
<td>;性别</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>;邮箱</td>
<td><input type="text" /></td>
<td>;年龄</td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="4">;留言内容</td>
</tr>
<tr>
<td colspan="4"><textarea cols="40" rows="8"></textarea></td>
</tr>
</table>
</body>
楼主你好。
html编写表格的方法有多种。
1. 最简单的就是用html标签<table></table>
表格是由表头,表格,表行组成的。
表头<tt></tt>
表行<tr></tr>
表格<td></td>
表头和表格都是放在表行里面的。
下面假设写一个2行1列的表格
2. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
</head>
<body>
<table>
<tr><th>;第一行</th></tr>
<tr><td>;第二行</td></tr>
</table>
</body>
</html>
用到拆分合并单元格,手写挺麻烦的,先用dw在设计视图片实现,然后再返回代码视图,复制即可.代码如下:
解释如下: 先插入四行两列的表格,第一列通过合并单元格来实现,第二列将所有单元格合并,然后新插入一个两行一列的表格即可实现上述效果。
内容居中是页面布局进行设置的,和php是没有关系的,想要实现内容居中,可以通过text-align:center等css样式,具体的方法如下:
1.直接对body设置CSS样式:text-align:center;
2.对文字外层对象加css居中样式;
3.CSS命名选择器为“.divcss5”,对此选择器内加居中样式。我们实例演示2个DIV对象,一个放文字一个放图片;
4.CSS实现对象内图片和文字居中效果截图,这里说明,图片“divcss5-logo-201305.gif”文件是与html放一起,使用html img标签实现图片引入html;
5.之间对文字外层对象加align="center",,此方法是以前较为常见的方法,直接在html标签内使用align="center"即可实现对象内图片或文字内容实现居中。实例演示HTML表格里居中与一般HTML标签内内容居中;
6.直接在标签内使用align属性,方便实践普通html标签和html表格标签内使用“align="center"”居中代码实现对象内内容居中。
如果只是水平居中的话,只需要先定义DIV的宽度,再设置外边距margin属性的左右边距为auto即可。此时DIV便会相对于它的父容器水平居中。
比如 <div class=div_a><div class="div_b"><div></div>
设置div_b的样式
.div_b{width:100px; margin:0 auto;}
这样div_b便在div_a中水平居中了。如果外面没有父DIV,则div_b便相对于整个页面居中。注意如果div_b定义了浮动属性float则无效。
<meta charset="UTF-8"> <style type="text/css"> body{background: #ddd;} div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;} .box1{background: #71a879;text-align: center;} .box2{background: #6a8bbc;line-height: 200px;} .box3{background: #dea46b;text-align: center;line-height: 200px;} </style> <body> html文字水平居中 html文字垂直居中 html文字水平上下居中