【超簡単】はてなブログの定型文を活用!表の作り方


表【縦2 横1】

 

A
a 1
b 2

 

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<thead>
<tr>
<th>

</th>
<th>
A
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
</tr>
</tbody>
</table>

 

表【縦3 横1】

A
a 1
b 2
c 3

 

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<thead>
<tr>
<th>

</th>
<th>
A
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
</tr>
<tr>
<th>
c
</th>
<td>
3
</td>
</tr>
</tbody>
</table>

 

表【縦3 横2】

A B
a 1 4
b 2 5
c 3 6

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<thead>
<tr>
<th>

</th>
<th>
A
</th>
<th>
B
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
<td>
4
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
<td>
5
</td>
</tr>
<tr>
<th>
c
</th>
<td>
3
</td>
<td>
6
</td>
</tr>
</tbody>
</table>

 

 

表【縦4 横1】

A
a 1
b 2
c 3
d 4

 

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<thead>
<tr>
<th>

</th>
<th>
A
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
</tr>
<tr>
<th>
c
</th>
<td>
3
</td>
</tr>
<tr>
<th>
d
</th>
<td>
4
</td>
</tr>
</tbody>
</table>

 

表【縦4 横2】

A B
a 1 5
b 2 6
c 3 7
d 4 8

 

 

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<thead>
<tr>
<th>

</th>
<th>
A
</th>
<th>
B
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
<td>
5
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
<td>
6
</td>
</tr>
<tr>
<th>
c
</th>
<td>
3
</td>
<td>
7
</td>
</tr>
<tr>
<th>
d
</th>
<td>
4
</td>
<td>
8
</td>
</tr>
</tbody>
</table>

 

 

 

 

表3行

 

a 1
b 2
c 3

 

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
</tr>
<tr>
<th>
c
</th>
<td>
3
</td>
</tr>
</tbody>
</table>

 

 

表4行

a 1
b 2
c 3
d 4

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
</tr>
<tr>
<th>
c
</th>
<td>
3
</td>
</tr>
<tr>
<th>
d
</th>
<td>
4
</td>
</tr>
</tbody>
</table>

 

 

表5行

 

a 1
b 2
c 3
d 4
e 5

 

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
</tr>
<tr>
<th>
c
</th>
<td>
3
</td>
</tr>
<tr>
<th>
d
</th>
<td>
4
</td>
</tr>
<tr>
<th>
e
</th>
<td>
5
</td>
</tr>
</tbody>
</table>