HTMLでテーブルを設計しています。

お世話になります、テーブルを作成しております。

どんなテーブルを作成したいかといいますと、

画面の中央（左右からみて中央であり、上下でみて上寄せ）に1個のテーブルを配置し、その中に複数個の単語をそれぞれ改行して表示したいと思います。

それらの単語はtext-align:left、text-align:center、text-align:rightのいずれかの属性を持ちます。

※　それらの単語のうち、最も長い単語に合わせてテーブルのwidthを決めます（自動で決まるのであれば、それがいいかと思います）。これが重要です。

そのwidthにあわせて、左揃えなら、テーブルの左端から始め、右揃えならテーブルの右端で終わるように単語を整列させたいと思います。

こういうテーブルができれば、ありがたいですが、ご存知のかたおられますか？

pやspanを駆使するのでも、<br/>を利用するのでも問題ございません。

下の場合ですと、pomegranateが一番長いので、これに合わせてwidthを自動調整して、画面の上中央にテーブルを配置します。
pomegranateは、text-align:left、text-align:center、text-align:rightのどれであっても、あたかもtext-align:centerのように見えるということになります。pomegranateより短い単語に関してのみ、text-align:の値が反映されます。

HTML
1<table align="center">
2  <tr>
3    <td>
4        apple<br/>  //左揃えしたい
5        banana<br/>  //右揃えしたい
6        kiwifruits<br/>  //左揃えしたい
7        blueberry<br/>  //中央揃えしたい
8        pomegranate<br/>  //左揃えしたい
9        garlic<br/>  //中央揃えしたい
10        potato<br/>  //右揃えしたい
11    </td>
12  </tr>
13</table>
14

サンプルが必要とのことでしたので、添付いたします。

takito

2018/11/07 10:23

ペイントツールなどで絵を描けますか？その方がどうしたいのか伝わりやすいと思います

dice142

2018/11/07 10:32

1つのセルでやる必要あります？

HisashiSakamoto

2018/11/07 10:40

サンプルをのせました。また、一つのセルでなくても問題ございません。

行動規範の内容に同意します

回答3件

ベストアンサー

やりたい事が、明確に分かりませんでしたが、こんなイメージですか？

html
1<style>
2  table td span { 
3    display: block;
4  }
5</style>
6
7<table align="center">
8  <tr>
9    <td>
10        <span style="text-align:left">apple</span>
11        <span style="text-align:right">banana</span>
12        <span style="text-align:left">kiwifruits</span>
13        <span style="text-align:center">blueberry</span>
14        <span style="text-align:left">pomegranate</span>
15        <span style="text-align:center">garlic</span>
16        <span style="text-align:right">potato</span>
17    </td>
18  </tr>
19</table>

投稿2018/11/07 10:33

teramon3333

総合スコア102

HisashiSakamoto

2018/11/09 02:33

皆さんご回答いただき、ありがとうございました。色々と代替の方法があると思うのですが、私の考えておりました table td span { display: block; margin-bottom:-0.4em; } のようにmarginが指定できる方法がほしかったので、こちらをベストアンサーにさせていただきました。

行動規範の内容に同意します

テーブルらしくセル分けしました。

HTML
1<table>
2  <tr><td class="left">abcde</td></tr>
3  <tr><td class="center">abc</td></tr>
4  <tr><td class="right">abcdefgh</td></tr>
5  <tr><td class="center">abcdefghijklmn</td></tr>
6  <tr><td class="right">abcde</td></tr>
7</table>

CSS
1table {
2  border: 1px solid black;
3}
4.left {
5  text-align: left;
6}
7.center {
8  text-align: center;
9}
10.right {
11  text-align: right;
12}

投稿2018/11/07 10:45

dice142

総合スコア5158

HisashiSakamoto

2018/11/09 02:33

行動規範の内容に同意します

HTML
1<table class="mr-auto ml-auto border">
2 <tbody>
3  <tr><td class="text-left">apple</td></tr>
4  <tr><td class="text-right">banana</td></tr>
5  <tr><td class="text-left">kiwifruits</td></tr>
6  <tr><td class="text-center">blueberry</td></tr>
7  <tr><td class="text-left">pomegranate</td></tr>
8  <tr><td class="text-center">garlic</td></tr>
9  <tr><td class="text-right">potato</td></tr>
10 </tbody>
11</table>

なんとなくclassをBootstrapに合わせていますが、もちろんCSSを書けばBootstrapは不要です。

CSS
1.mr-auto {
2  margin-right: auto;
3}
4
5.ml-auto {
6  margin-left: auto;
7}
8
9.border {
10  border: 1px solid #dee2e6;
11}
12
13.text-left {
14  text-align: left;
15}
16
17.text-right {
18  text-align: right;
19}
20
21.text-center {
22  text-align: center;
23}