<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>table  |  ITのあれこれ</title>
	<atom:link href="https://himatoto.com/tag/table/feed/" rel="self" type="application/rss+xml" />
	<link>https://himatoto.com</link>
	<description>初心者視点で分かりやすく</description>
	<lastBuildDate>Fri, 05 Feb 2021 11:39:39 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.5.3</generator>

<image>
	<url>https://himatoto.com/wp-content/uploads/2020/06/cropped-4495bed8051fcc9fd4ac4bababda36e3-32x32.png</url>
	<title>table  |  ITのあれこれ</title>
	<link>https://himatoto.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【Bootstrap】tableを簡単に整える</title>
		<link>https://himatoto.com/bootstrap3/</link>
					<comments>https://himatoto.com/bootstrap3/#respond</comments>
		
		<dc:creator><![CDATA[himatoto]]></dc:creator>
		<pubDate>Thu, 14 Jan 2021 16:26:44 +0000</pubDate>
				<category><![CDATA[Bootstrap]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[table]]></category>
		<guid isPermaLink="false">https://himatoto.com/?p=513</guid>

					<description><![CDATA[HTMLのtableをBootstrapを使用して簡単に整える方法を説明します。 （Bootstrap4を使用しています。） 目次 スタイルを適用していない状態ベースを整える線を表示する行の背景色を1行飛びで表示するマウ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>HTMLのtableをBootstrapを使用して簡単に整える方法を説明します。</p>



<p>（Bootstrap4を使用しています。）</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">スタイルを適用していない状態</a></li><li><a href="#toc2" tabindex="0">ベースを整える</a></li><li><a href="#toc3" tabindex="0">線を表示する</a></li><li><a href="#toc4" tabindex="0">行の背景色を1行飛びで表示する</a></li><li><a href="#toc5" tabindex="0">マウスオーバーした時に行の背景色を表示する</a></li><li><a href="#toc6" tabindex="0">行の高さを狭くする</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">スタイルを適用していない状態</span></h2>



<pre class="wp-block-code"><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;No&lt;/th&gt;
      &lt;th&gt;名前&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;テスト太郎&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>



<div class="wp-block-image"><figure class="aligncenter size-large"><img fetchpriority="high" decoding="async" width="285" height="187" src="https://himatoto.com/wp-content/uploads/2020/11/table1.png" alt="" class="wp-image-538"/></figure></div>



<h2 class="wp-block-heading"><span id="toc2">ベースを整える</span></h2>



<div class="wp-block-cocoon-blocks-info-box warning-box block-box">
<p>tableタグに「<strong>table</strong>」を追加</p>
</div>



<pre class="wp-block-code"><code>&lt;table&gt;
  &lt;thead class="<strong><span class="bold-red">table</span></strong>"&gt;
    &lt;tr&gt;
      &lt;th&gt;No&lt;/th&gt;
      &lt;th&gt;名前&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;テスト太郎&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="666" height="200" src="https://himatoto.com/wp-content/uploads/2020/11/table2-1.png" alt="" class="wp-image-542" srcset="https://himatoto.com/wp-content/uploads/2020/11/table2-1.png 666w, https://himatoto.com/wp-content/uploads/2020/11/table2-1-300x90.png 300w" sizes="(max-width: 666px) 100vw, 666px" /></figure></div>



<h2 class="wp-block-heading"><span id="toc3">線を表示する</span></h2>



<div class="wp-block-cocoon-blocks-info-box warning-box block-box">
<p>tableタグに「<strong>table-bordered</strong>」を追加</p>
</div>



<pre class="wp-block-code"><code>&lt;table&gt;
  &lt;thead class="table <span class="bold-red">table-bordered</span>"&gt;
    &lt;tr&gt;
      &lt;th&gt;No&lt;/th&gt;
      &lt;th&gt;名前&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;テスト太郎&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="720" height="213" src="https://himatoto.com/wp-content/uploads/2020/11/table3.png" alt="" class="wp-image-544" srcset="https://himatoto.com/wp-content/uploads/2020/11/table3.png 720w, https://himatoto.com/wp-content/uploads/2020/11/table3-300x89.png 300w" sizes="(max-width: 720px) 100vw, 720px" /></figure></div>



<h2 class="wp-block-heading"><span id="toc4">行の背景色を1行飛びで表示する</span></h2>



<div class="wp-block-cocoon-blocks-info-box warning-box block-box">
<p>tableタグに「<strong><strong>table-striped</strong></strong>」を追加</p>
</div>



<pre class="wp-block-code"><code>&lt;table&gt;
  &lt;thead class="table table-bordered <span class="bold-red">table-striped</span>"&gt;
    &lt;tr&gt;
      &lt;th&gt;No&lt;/th&gt;
      &lt;th&gt;名前&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;テスト太郎&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;テスト次郎&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;テスト三郎&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>



<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img loading="lazy" decoding="async" src="https://himatoto.com/wp-content/uploads/2021/01/table4.png" alt="" class="wp-image-560" width="721" height="305" srcset="https://himatoto.com/wp-content/uploads/2021/01/table4.png 720w, https://himatoto.com/wp-content/uploads/2021/01/table4-300x127.png 300w" sizes="(max-width: 721px) 100vw, 721px" /></figure></div>



<h2 class="wp-block-heading"><span id="toc5">マウスオーバーした時に行の背景色を表示する</span></h2>



<div class="wp-block-cocoon-blocks-info-box warning-box block-box">
<p>tableタグに「<strong><strong><strong>table-hover</strong></strong></strong>」を追加</p>
</div>



<pre class="wp-block-code"><code>&lt;table&gt;
  &lt;thead class="table table-bordered table-striped <span class="bold-red">table-hover</span>"&gt;
    &lt;tr&gt;
      &lt;th&gt;No&lt;/th&gt;
      &lt;th&gt;名前&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;テスト太郎&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;テスト次郎&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;テスト三郎&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>



<div class="wp-block-image"><figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="720" height="314" src="https://himatoto.com/wp-content/uploads/2021/01/table5.png" alt="" class="wp-image-561" srcset="https://himatoto.com/wp-content/uploads/2021/01/table5.png 720w, https://himatoto.com/wp-content/uploads/2021/01/table5-300x131.png 300w" sizes="(max-width: 720px) 100vw, 720px" /></figure></div>



<h2 class="wp-block-heading"><span id="toc6">行の高さを狭くする</span></h2>



<div class="wp-block-cocoon-blocks-info-box warning-box block-box">
<p>tableタグに「<strong><strong><strong><strong>table-sm</strong></strong></strong></strong>」を追加</p>
</div>



<pre class="wp-block-code"><code>&lt;table&gt;
  &lt;thead class="table table-bordered table-striped table-hover <span class="bold-red">table-sm</span>"&gt;
    &lt;tr&gt;
      &lt;th&gt;No&lt;/th&gt;
      &lt;th&gt;名前&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;テスト太郎&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;テスト次郎&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;テスト三郎&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>



<div class="wp-block-image"><figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="720" height="252" src="https://himatoto.com/wp-content/uploads/2021/01/table6.png" alt="" class="wp-image-563" srcset="https://himatoto.com/wp-content/uploads/2021/01/table6.png 720w, https://himatoto.com/wp-content/uploads/2021/01/table6-300x105.png 300w" sizes="(max-width: 720px) 100vw, 720px" /></figure></div>
]]></content:encoded>
					
					<wfw:commentRss>https://himatoto.com/bootstrap3/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
