HTML中表格行旁邊的文本

Question

我對前端開發很陌生，我遇到了這個問題：我想在表格的每一行（左邊）和每一列上顯示文字。 結果類似於棋盤：

我該怎么辦呢？

Answer 1

這不是完美的，但是模仿它看起來像什么。

我所做的是制作一個3x3網格，其中網格的頂部和左側包含數字，內部包含邊框顯示。

HTML

<div id="grid">
  <div class="grid-element outside"></div>
  <div class="grid-element outside">
    <span class="top-content">1</span>
  </div>
  <div class="grid-element outside">
    <span class="top-content">2</span>
  </div>
  <div class="grid-element outside">
    <span class="left-content">A<span>
  </div>
  <div class="grid-element"></div>
  <div class="grid-element"></div>
  <div class="grid-element outside">
    <span class="left-content">B<span>
   </div>
  <div class="grid-element"></div>
  <div class="grid-element"></div>
</div>

CSS

 .clear {
  clear: both;
}

#grid {
  width: 610px;
}

.grid-element {
  width: 200px;
  height: 200px;
  float: left;
  border:1px solid #000;
}

.outside{
  border:1px solid #fff;
   position: relative;
}

.top-content {
    position: absolute;
    bottom: 0;
    right:50%;
}

.left-content {
    position: absolute;
    top: 50%;
    right:10px;
}

的jsfiddle

Answer 2

您可以使用HTML表格：

<table>
  <tr>
    <td class="outside"></td>
    <td class="outside">1</td>
    <td class="outside">2</td>
    <td class="outside">3</td>
  </tr>
  <tr>
    <td class="outside">A</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="outside">B</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="outside">C</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>  

並添加CSS樣式：

.outside {border:none;}
table {border-collapse: collapse; height: 250px; width: 250px;}
th, td {border: 1px solid black;}
td {text-align: center; vertical-align: middle;}

但是，查看bootstrap的網格布局將是一個更好的選擇。 www.getbootstrap.com

這是一個有效的演示： http ： //plnkr.co/edit/JWP5RvA5sOATseliVveg？p = preview

Answer 3

我應該嘗試嵌套兩個表。

你可以嘗試這樣的事情：

HTML

<table class="outer" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th></th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td colspan="3" rowspan="3" id="inner-container">
                <div class="inner">
                    <table cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td>B</td>
        </tr>
        <tr>
            <td>C</td>
        </tr>
    </tbody>
</table>

CSS

.outer th {
    padding: 5px 20px;
}


.outer > tbody > tr > td {
    padding: 20px 5px;
}

.outer th,
.outer td {
    text-align: center;
}

.inner {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
}

.inner table {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
}

.inner td {
    border: 1px solid #000;
}

#inner-container {
    padding: 0;
    position: relative;
}

這是我的演示： https ： //jsfiddle.net/dnxgcoyo/1/