合法SESおじさんがPGを目指す日記

合法SESおじさんがICT現場でひたすら足搔く様子はなるたけ書かない技術ブログです

テーブルを作る話(超うすあじ)

瀬野です。
今日はなんかやる気ないです。

内容も薄いです。

とりあえずテーブルのコードだけ

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>太陽系の惑星</title>
	<link rel="stylesheet" type="text/css" href="table_style.css">
</head>
<body>
<table>
<colgroup span="1"></colgroup>
<colgroup>
	<col class="semi-major">
	<col class="radius">
</colgroup>
<caption><big>表1.太陽系の惑星</big></caption>
<thead>
	<tr><th>惑星名</th><th>軌道長判定<br><small>(天文単位)</small></th><th>直径<br><small>(地球=1)</small></th></tr>
</thead>
<tbody>
	<tr><td>水星</td><td>0.387</td><td>0.38</td></tr>
	<tr><td>金星</td><td>0.723</td><td>0.95</td></tr>
	<tr><td>地球</td><td>1.000</td><td>1.00</td></tr>
	<tr><td>火星</td><td>1.524</td><td>0.53</td></tr>
	<tr><td>木星</td><td>5.203</td><td>11.21</td></tr>
	<tr><td>土星</td><td>9.555</td><td>9.41</td></tr>
	<tr><td>天王星</td><td>19.19</td><td>4.01</td></tr>
	<tr><td>海王星</td><td>30.11</td><td>3.88</td></tr>
</tbody>
	<tfoot>
	<tr><td>最大値</td><td>30.11</td><td>11.21</td></tr>
	</tfoot>
</table>
</body>
</html>

あとCSS

table{
	border-collapse: collapse;
	text-align: center;
	font-family: sans-serif;
}
th,td{
	padding: 0.3em 0.7em;
	border: 1px solid darkgoldenrod;
}
th {
	color: white;
	background-color: saddlebrown;
}
th:first-child{ background-color: maroon; }
tbody tr:nth-child(2n+1) td{ background-color: ivory; }
tbody tr:nth-child(2n) td{ background-color: cornsilk; }
tfoot td { background-color: wheat; }

出来たのはこちら
f:id:senobro:20170504190352p:plain


これをperlで書いて複製するにはどうすればいいのかなー。ちょっとやってみます。

【追記】
出来ました。

#! /usr/bin/env perl
use strict;
use warnings;

#惑星のテーブルデータ
my @data = (
	'惑星名:起動長判定(天文単位):直径(地球=1)',
	'水星:0.387:0.38',
	'金星:0.723:0.95',
	'地球:1.000:0.95',
	'火星:1.524:0.95',
	'木星:5.203:0.95',
	'土星:9.555:0.95',
	'天王星:19.19:4.01',
	'海王星:30.11:3.88',
);

#html化して表示
print "<html><table border=\"1\">\n";

my $num = 0;

foreach(0..8){
	my @table = split(/:/, $data[$num]);
	print "<tr><td>$table[0]</td><td>$table[1]</td><td>$table[2]</td></tr>\n";
	$num++;
}

print "</table></html>\n";

f:id:senobro:20170504193800p:plain

続きはまた次回。