webdata
DX推進をサポートする技術者向け情報提供サイト

初心者向けPHP・データベース入門

TOP >初心者向けPHP・データベース入門 >2.1 HTMLで簡単な表作成(セル結合)

【PHP入門】HTMLで簡単な表作成(セル結合)

 2024-03-15 (更新日:2024-03-15)

<学習する内容>

 簡単HTML文のサンプルプログラムを使ってをタグのセル結合を理解します。

1)HTMLでセル結合させた一覧表の表示の枠組みを作成

ファイル名:list_selljoin.html
配置先:c:\xampp\htdocs\
配置先URL:http://localhost/list_selljoin.html
サンプルプログラム名:list_selljoin.html
						<!DOCTYPE html>
						<html lang="ja">
						
						<head>
							<meta charset="utf-8">
							<link rel="stylesheet" href="/style.css" type="text/css">
							<title>売上一覧表</title>
						</head>
						
						<body>
							売上一覧表<br>
							<table bgcolor="#a9a9a9" cellspacing="1px" style="font-size:12px;" >
								<tr bgcolor="#D3D3D3" style="height:24px;" align="center">
									<td width="200px" rowspan="2">部署</td>
									<td width="200px" colspan="2">2024年4月</td>
                                    <td width="200px" colspan="2">2024年5月</td>
                                    <td width="200px" colspan="2">2024年6月</td>
                                    <td width="200px" colspan="2">半期計</td>
								</tr>
                                <tr bgcolor="#D3D3D3" style="height:24px;" align="center">
									<td width="100px">売上</td>
									<td width="100px">利益</td>
                                    <td width="100px">売上</td>
									<td width="100px">利益</td>
                                    <td width="100px">売上</td>
									<td width="100px">利益</td>
                                    <td width="100px">売上</td>
									<td width="100px">利益</td>
								</tr>
								<tr bgcolor="white" style="height:24px;" align="right">
									<td align="center">営業1課</td>
									<td>10,000</td>
									<td>2,000</td>
                                    <td>20,000</td>
									<td>4,000</td>
                                    <td>15,000</td>
									<td>3,000</td>
                                    <td>45,000</td>
									<td>9,000</td>
								</tr>
                                <tr bgcolor="white" style="height:24px;" align="right">
                                    <td align="center">営業2課</td>
                                    <td>30,000</td>
                                    <td>1,500</td>
                                    <td>25,000</td>
                                    <td>3,000</td>
                                    <td>40,000</td>
                                    <td>5,000</td>
                                    <td>95,000</td>
                                    <td>9,500</td>
								</tr>
							</table>
						</body>
						</html>
					

<解説>


タグ要素・プロパティ
 14行目の rowspan はの結合を行こないます。=”2” とは2の結合でこの指定された数字の行数を結合させます。
 15行目〜18行目の colspan はの結合を行こないます。=”2” とは2の結合でこの指定された数字の列数を結合させます。