導航:首頁 > 萬維百科 > 網頁設計上一列和下一列合並

網頁設計上一列和下一列合並

發布時間:2020-09-22 21:38:27

1、HTML5 怎麼把一行一列 和二行一列 合並起來?

<table width="500" border="1">
  <tr>
    <td rowspan="2">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

  rowspan="2"這個就是合並的。

2、網頁設計,在同一個頁面可以展開並合並的輸入框怎麼做?

用javascript 但如果你只是偶爾用一下javascript不想深入學習。那還是用
現在比較流行的一個javascript框架jquer吧,它能簡化javascript操作。
學起來容易,最重要一點是它在各主流瀏覽器之間兼容性好。

jquery在網上教雖然多,但也很雜,這里給你推薦一個設計前沿的視頻教程:
http://learning.artech.cn/20080621.mastering-javascript-jquery.html

接下來我用jquery給你解決這個問題:

首先下載jquery框架(網上多得是)

然後調jquery
<script type="text/javascript" src="../js/jquery-1.4.2.min.js">
</script>
然後加幾行css
<style type="text/css">
.hide{
display:none; / *用來在顯示和隱藏之間切換的* /
}
#main{
width:300px;
height:auto;
border:1px #669933 solid;
}
#main_top{
width:300px;
height:30px;
order:1px #669933 solid;
}
#main_bottom{
width:300px;
height:250px;
border:1px #669933 solid;

}
</style>

body部分:
<body>
<div id="main">
<div id="main_top">
這里是顯示/隱藏切換鈕
</div>
<div id="main_bottom">
</div>
</div>
</body>

好了,然後寫用jquery做顯示隱藏部分的代碼:

<script type="text/javascript">
$(document).ready(function() {
$("#main_top").click(function(){
$("#main_bottom").toggleClass("hide");
});
});
</script>

這樣就搞定了,然後自己擴展一下。那個向上箭頭,設置為main_top的背景就好了

3、網頁中表格如何合並單元格

1、首先,我們打開DreamWeaver軟體,新建一個html的頁面,並以table命名進行保存。

2、然後我們在頁面的body標簽內部,新建一個table,並在內部添加行和單元格標簽。

3、接下來,我們需要在每個單元格中添上相應的文字,並在瀏覽器中查看效果。

4、可以看到,各個單元格之間的區別並不明顯,我們需要為其添加邊框。

5、邊框只需要在table標簽中添加,border即可,border值為阿拉伯數字,添加border後,效果更明顯。

6、我們接下來要將第一行的三個單元格合並成一個單元格。分別是跨行合並的rowspan和跨列合並的colspan

7、具體的用法是這樣的。我們在td標簽中添加colspan="",引號內填寫相應的阿拉伯數字即可。

8、然後在瀏覽器中刷新頁面,可以看到第一行變成了一個單元格。

9、跨行合並和跨列合並是相似的。

4、網頁製作中合並單元格的方法

主要用到兩個標簽一個是rowspan和colspan

colspan 屬性規定單元格可橫跨的列數。

rowspan 屬性規定單元格可橫跨的行數。

合並行代碼如下

<table border="1">
  <tr>
    <td>行一</td>
    <td>行二</td>
  </tr>
  <tr>
    <td colspan="2">合並行</td>
  </tr>
  <tr>
    <td colspan="2">合並行</td>
  </tr>
</table>


合並列

<table border="1">
  <tr>
    <td>行一</td>
    <td>行二</td>
<td>行三</td>
  </tr>
  <tr>
    <td>第一</td>
    <td rowspan="2">合並列</td>
    <td rowspan="2">合並列</td>
  </tr>
  <tr>
    <td>第二</td>
    
  </tr>
</table>


行列合並

<table width="200" border="1">
  <tr>
    <td>時間</td>
    <td>星期一</td>
    <td>星期二</td>
    <td>星期三</td>
  </tr>
  <tr>
    <td>9:30</td>
    <td rowspan="2">1</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>10:20</td>
    
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>11:40</td>
    <td>語文</td>
    <td colspan="2">化學</td>
    
  </tr>
  <tr>
    <td>13:50</td>
    <td>數學</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

三個效果圖如下


5、excel 怎麼給所有的列合並到一列

excel中我想把兩列內容合並成一列 1 假如兩列為a、b,滑鼠激活c1單元格,然後選擇菜單「插入」-「函數」 在插入函數對話框中選擇函數下的concatenate,點確定,出現函數參數對話框,在text1選擇要合並的單元格a1、text2選擇b2,再按確定就ok了。再把此公式向下復制就行了 2 如要把a和b列合並,則在c1單元格中輸入「=concatenate(a1,b1)」,則可將a1、b1兩單元格中的數據合並在c1單元格中 3 用公式如果你想把a列和b列的內容合在一起,
在c1上用公式=a1&b1

6、html怎麼合並單元格

colspan 是合並列,rowspan是合並行,合並行的時候,比如rowspan="2",它的下一行tr會少一列;合並列的時候 colspan="2",此行的列會少一列。

代碼演示:

<table border="1" style={{margin:200}}>
 

<tbody>
 

<tr>
 

<th colspan="2">我是佔位符</th>
  

<th colspan="2">我是佔位符</th>
 

</tr>
 

<tr>
 

<th rowspan="2">我是佔位符</th>
 

<th>我是佔位符</th>
 

<th>我是佔位符</th>
 

<th>我是佔位符</th>
 

</tr>
 

<tr>
 

<th>我是佔位符</th>
 

<th>我是佔位符</th>

<th>我是佔位符</th>
 

</tr>
 

</tbody>
 

</table>

演示結果

(6)網頁設計上一列和下一列合並擴展資料:

rowspan規定表頭單元格應該橫跨的行數。注意: rowspan="0" 告知瀏覽器使單元格橫跨到表格組件中的最後一個行(thead、tbody 或 tfoot)。

7、將第一列單元格上的內容和第一行單元格上的內容合並填充到匯合的單元格里。

A2單元格輸入:

=$A2&B$1
橫向豎向復制

8、網頁設計!將這個表格編寫成html語言可以嗎? 就是合並行合並列怎麼編

<table border="1" cellpadding="10">
        <tr>
           <td colspan="2">標題</td>
        </tr>
        <tr>
           <td rowspan="2">單1</td><td>單2</td>
        </tr>
        <tr>
           <td>單3</td>
        </tr>
</table>

9、請問如何用 DIV+CSS 寫下面這個表格,3行2列,但是一一列中兩行是合並的。如下面的代碼

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
<!--
#main {
float: left;
height: auto;
width: 904px;
border: 1px solid #FF0000;
}
#left {
float: left;
height: 300px;
width: 600px;
border: 1px solid #00FF00;
}
#right {
float: right;
height: 300px;
width: 300px;
border: 1px solid #0000FF;
}
.left_div {
border: 1px solid #999999;
height: 100px;
}
.rt_div1 {
border: 1px solid #999999;
height: 200px;
}
.rt_div2 {
border: 1px solid #999999;
height: 100px;
}

}
-->
</style>
</head>

<body>
<div id="main">
<div id="left">
<div id="left_1" class="left_div">left1</div>
<div id="left_2" class="left_div">left2</div>
<div id="left_3" class="left_div">left3</div>
</div>
<div id="right">
<div id="rt_1" class="rt_div1">rt1</div>
<div id="rt_2" class="rt_div2">rt2</div>

</div>
</div>
</body>
</html>

與網頁設計上一列和下一列合並相關的知識