为了账号安全,请及时绑定邮箱和手机立即绑定

怎么用html 或CSS写出下列的表单样子

/ 猿问

怎么用html 或CSS写出下列的表单样子

慕UI1458911 2017-06-20 20:10:59

http://img.mukewang.com/594910c10001df4205860094.jpg

查看完整描述

22 回答

已采纳
?
小世界里的白日梦

//img.mukewang.com/594a27a40001909704550151.jpg

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>


table{

border-collapse:collapse;

}

table td{ 

border:1px solid #ddd; 

width:80px; 

height:30px; 

text-align:center;

}

.one{ 

vertical-align: top;

}

.two{

vertical-align: top;

}

</style>

</head>

<body>

<table>

<tr>

<td rowspan="3" class="one">1</td>

<td rowspan="3" class="two">2</td>

<td>A</td>

<td>28</td>

<td>12%</td>

</tr>

<tr>

<td>B</td>

<td>56</td>

<td>98%</td>

</tr>

<tr>

<td>A</td>

<td>33</td>

<td>42%</td>

</tr>

</table>

</body>

</html>

查看完整回答
10 反对 回复 2017-06-21
?
慕桂英5357533
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			table{
				border-collapse:collapse;
			}
			table td{
				border:1px solid #0099FF;
				width:80px;
				height:10px;
				text-align:center;
			}
			.one{
			   vertical-align:top;
			}
			.two{
				vertical-align:top;
			}
		</style>
	</head>
	<body>
		<table border="1">
			<tr>
				<td rowspan="4" class="one">1</td>
				<td rowspan="4" class="two">200</td>
				<td>A</td>
				<td>80</td>
				<td>40%</td>		
			</tr>
			<tr>
				<td>B</td>
				<td>96</td>
				<td>48.00%</td>
			</tr>
				<tr>
				<td>C</td>
				<td>18</td>
				<td>9.00%</td>
			</tr>
			<tr>
				<td>D</td>
				<td>6</td>
				<td>3.00%</td>
			</tr>
		</table>
	</body>
</html>


查看完整回答
8 反对 回复 2018-01-19
?
Steam_

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
 <style type="text/css">
  .table{
   border:1px solid #333;}
 </style>
</head>

<body>
 <table cellspacing="0" cellpadding="0">
  <tr class="table">
         <td rowspan="4" class="table">1</td>
            <td rowspan="4" class="table">200</td>
            <td class="table">A</td>
            <td class="table">80</td>
            <td class="table">40.00%</td>
        </tr>
        <tr>
         <td class="table">B</td>
            <td class="table">96</td>
            <td class="table">48.00%</td>
        </tr>
        <tr>
         <td class="table">C</td>
            <td class="table">18</td>
            <td class="table">9.00%</td>
        </tr>
        <tr>
         <td class="table">D</td>
            <td class="table">6</td>
            <td class="table">3.00%</td>
        </tr>
 </table>
</body>
</html>


查看完整回答
2 反对 回复 2019-01-20
?
慕斯4031925

sbrdx

查看完整回答
2 反对 回复 2017-09-17
?
tanya雅

rowspan

查看完整回答
1 反对 回复 2018-09-27
?
Amnesia_

直接用表格。前面两个用rows="4"就可以了

查看完整回答
1 反对 回复 2017-06-21
?
山高丿路远

//img2.mukewang.com/5daad3a20001ee6307520361.jpgx效果图,代码在上面一楼

查看完整回答
反对 回复 2019-10-19
?
山高丿路远

<table width="709" height="334" border="1" cellpadding="1" cellspacing="1">

  <tr>

    <td width="90" rowspan="5"><div align="center">合并单元格</div></td>

    <td width="90" rowspan="5"><div align="center">一样原理</div></td>

    <td width="167"><div align="center">1</div></td>

    <td width="167"><div align="center">2</div></td>

    <td width="167"><div align="center">3</div></td>

  </tr>

  <tr>

    <td><div align="center">6</div></td>

    <td><div align="center">4</div></td>

    <td><div align="center">4</div></td>

  </tr>

  <tr>

    <td><div align="center">7</div></td>

    <td><div align="center">2</div></td>

    <td><div align="center">5</div></td>

  </tr>

  <tr>

    <td><div align="center">8</div></td>

    <td><div align="center">3</div></td>

    <td><div align="center">6</div></td>

  </tr>

  <tr>

    <td><div align="center">9</div></td>

    <td><div align="center">8</div></td>

    <td><div align="center">7</div></td>

  </tr>

</table>


查看完整回答
反对 回复 2019-10-19
?
qq_浪漫小私奔_03656104

我也想知道答案

查看完整回答
反对 回复 2019-08-09
?
HLC_123456

用html中的table标签做出相应行列的表格,然后用css修饰表格。

查看完整回答
反对 回复 2019-06-18
?
qq_慕移动7587876

666

查看完整回答
反对 回复 2019-06-13
?
qq_慕丝7509465
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
 table
 {
            position: absolute;
 top: 10px;
 left: 15%;
 border-collapse:collapse;
 width: 70%;
 }

        table,th, td
 {
            border: 1px solid black;
 text-align:center;
 }
        .one{
            vertical-align: center;
 }
        .two{
            vertical-align: top;
 }
    </style>
    <title>test</title>
</head>
<body>
<table>
    <tr>
        <td rowspan="5" class="one">1</td>
        <td rowspan="5" class="two">200</td>
    </tr>
    <tr>
        <td>A</td>
        <td>80</td>
        <td>40.00%</td>
    </tr>
    <tr>
        <td>B</td>
        <td>96</td>
        <td>48.00%</td>
    </tr>
    <tr>
        <td>c</td>
        <td>18</td>
        <td>9.00%</td>
    </tr>
    <tr>
        <td>d</td>
        <td>6</td>
        <td>3.00%</td>
    </tr>
</table>
</body>
</html>
加了position定位


查看完整回答
反对 回复 2019-05-03
?
新31

bootstrap即可

查看完整回答
反对 回复 2019-03-22
?
网站设计

http://kua0.com 跨零代码

查看完整回答
反对 回复 2018-11-29
?
qq_诚实可靠小郎君_0

请教大牛!

查看完整回答
反对 回复 2018-11-07
?
深山小童

有没有啥css代替rowspan属性

查看完整回答
反对 回复 2018-05-30
?
hahhhha

表格布局,合并行和并列。

<html>
 <head> 
  <meta charset="utf-8" /> 
  <title></title> 
  <style>
	table{
	 border-collapse:collapse;
	}
	table td{ 
  	border:1px solid #ddd; 
  	width:80px; 
  	height:30px; 
  	text-align:center;
    vertical-align: middle;
	}
	.one{ 
	 vertical-align: top;
	}
	.two{
	 vertical-align: top;
	}
</style> 
 </head> 
 <body> 
  <table> 
   <tbody>
    <tr> 
     <td rowspan="3" class="one">1</td> 
     <td rowspan="3" class="two">2</td> 
     <td>A</td> 
     <td>28</td> 
     <td>12%</td> 
    </tr> 
    <tr> 
     <td>B</td> 
     <td>56</td> 
     <td>98%</td> 
    </tr> 
    <tr> 
     <td>A</td> 
     <td>33</td> 
     <td>42%</td> 
    </tr> 
   </tbody>
  </table>  
 </body>
</html>


查看完整回答
反对 回复 2017-10-16
?
qq_歲月靜好不忘初心_0

table

查看完整回答
反对 回复 2017-06-21
?
Heather_E

flex

查看完整回答
反对 回复 2018-08-28
?
书旅

那不就是表格吗,用html中的table标签做出相应行列的表格,然后用css修饰表格。慕课上有相关视频

查看完整回答
反对 回复 2017-06-21

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信