วิธีทั่วไปในการเขียนตาราง HTML ด้วยส่วนหัวแนวตั้ง?

Question 1

สวัสดีทั้งหมดเป็นเวลานานแล้วที่ฉันถามอะไรบางอย่างนี่เป็นสิ่งที่รบกวนฉันมาระยะหนึ่งแล้วคำถามนั้นอยู่ในชื่อ:

วิธีใดที่คุณต้องการในการเขียนตาราง HTML ที่มีส่วนหัวแนวตั้ง

โดยส่วนหัวแนวตั้งฉันหมายความว่าตารางมี<th>แท็กheader ( ) ทางด้านซ้าย (โดยทั่วไป)

ส่วนหัวข้อมูลข้อมูลข้อมูล
ส่วนหัว 2ข้อมูลข้อมูล
ส่วนหัวข้อมูลข้อมูลข้อมูล3ข้อมูล

พวกเขามีลักษณะเช่นนี้จนถึงตอนนี้ฉันมีสองตัวเลือก

ตัวเลือกแรก

   
    <table id="vertical-1">
            <caption>First Way</caption>
            <tr>
                <th>Header 1</th>
                <td>data</td><td>data</td><td>data</td>
            </tr>
            <tr>
                <th>Header 2</th>
                <td>data</td><td>data</td><td>data</td>
            </tr>
            <tr>
                <th>Header 2</th>
                <td>data</td><td>data</td><td>data</td>
            </tr>
        </table>

ประโยชน์หลักของวิธีนี้คือการที่คุณมีส่วนหัว (ซ้ายจริง) ทางขวาถัดจากข้อมูลที่แสดงให้เห็นถึงสิ่งที่ฉันไม่ชอบ แต่เป็นว่า<thead>, <tbody>และ<tfoot>แท็กจะหายไปและมีวิธีการที่จะรวมพวกเขาโดยไม่ทำลาย วางองค์ประกอบไว้ด้วยกันอย่างสวยงามซึ่งนำฉันไปสู่ตัวเลือกที่สอง

ตัวเลือกที่สอง

   
        <style type="text/css">
            #vertical-2 thead,#vertical-2 tbody{
                display:inline-block;
            }

        </style>
        <table id="vertical-2">
            <caption>Second Way</caption>
            <thead>
                <tr>
                    <th colspan="3">Header 1</th>
                </tr>
                <tr>
                    <th colspan="3">Header 2</th>
                </tr>
                <tr>
                    <th colspan="3">Header 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>row 1</td>
                    <td>row 1</td>
                    <td>row 1</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">Footer</td>
                </tr>
            </tfoot>
        </table>

ประโยชน์หลักนี่คือที่คุณมีตาราง html ที่สื่อความหมายได้อย่างเต็มที่ข้อบกพร่องที่เป็นตัวแทนที่เหมาะสมกับความต้องการบิตของ CSS สำหรับtbodyและtheadแท็กและที่ความสัมพันธ์ระหว่างส่วนหัวและข้อมูลที่ไม่ชัดเจนเท่าที่ผมมีข้อสงสัยของฉันเมื่อมีการสร้าง มาร์กอัป

ดังนั้นทั้งสองวิธีแสดงตารางว่าควรจะเป็นอย่างไรต่อไปนี้เป็นเหยือก:

แสดงผล
ด้วยส่วนหัวทางด้านซ้ายหรือด้านขวาหากคุณต้องการดังนั้นข้อเสนอแนะทางเลือกอื่นปัญหาเบราว์เซอร์หรือไม่?

Question 2

ประการแรกตัวเลือกที่สองของคุณไม่ใช่ HTML ที่ถูกต้องในแง่ที่ว่าแถว (TR) ทั้งหมดในตารางควรมีจำนวนคอลัมน์ (TD) เท่ากัน ส่วนหัวของคุณมี 1 ในขณะที่เนื้อหามี 3 คุณควรใช้แอตทริบิวต์ colspan เพื่อแก้ไขปัญหานั้น

ข้อมูลอ้างอิง: "ส่วน THEAD, TFOOT และ TBODY ต้องมีจำนวนคอลัมน์เท่ากัน" - วรรคสุดท้ายของส่วน 11.2.3

ด้วยเหตุนี้ตัวเลือกแรกจึงเป็นแนวทางที่ดีกว่าในความคิดของฉันเพราะสามารถอ่านได้ไม่ว่าฉันจะเปิดใช้งาน CSS หรือไม่ก็ตาม เบราว์เซอร์บางตัว (หรือโปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหา) ไม่ทำ CSS ดังนั้นจะทำให้ข้อมูลของคุณไม่สมเหตุสมผลเนื่องจากส่วนหัวจะแสดงคอลัมน์แทนแถว

Question 3

ทางเลือกแรก ... คิดว่าเป็นแนวทางที่ง่ายและดีกว่า ..

Question 4

สุจริตตัวเลือกที่ 1 ฉันขอแนะนำให้คุณดูตัวอย่างนี้จาก W3.org (ลิงค์ด้านล่าง) ฉันคิดว่าวิธีนี้ดีที่สุดเพราะวิธีนี้ส่วนหัวของคุณจะถูกตีความจากโปรแกรมอ่านหน้าจอด้วย

https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only

Question 5

หากคุณต้องการแสดงองค์ประกอบควบคุมที่ผูกข้อมูล (เช่น asp repeater) ในตารางของคุณตัวเลือกแรกจะไม่สามารถทำได้ ตัวเลือกที่สองสามารถใช้ได้ดังนี้

<asp:Repeater ID="hours" runat="server">
    <HeaderTemplate>
    <table id="vertical-table">
        <thead>
            <tr><th colspan="0">hours:</th></tr>
            <tr><th colspan="1">Monday</th></tr>
            <tr><th colspan="1">Tuesday</th></tr>
            <tr><th colspan="1">Wednesday</th></tr>
            <tr><th colspan="1">Thursday</th></tr>
            <tr><th colspan="1">Friday</th></tr>
            <tr><th colspan="1">Saturday</th></tr>
            <tr><th colspan="1">Sunday</th></tr>
        </thead>
        <tbody>
    </HeaderTemplate>
    <ItemTemplate>
            <tr><td><%# Container.DataItem %></td></tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody>
    </table>
    </FooterTemplate>
</asp:Repeater>

Question 6

div.vertical {
  margin-left: -85px;
  position: absolute;
  width: 215px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  /* Safari/Chrome */
  -moz-transform: rotate(-90deg);
  /* Firefox */
  -o-transform: rotate(-90deg);
  /* Opera */
  -ms-transform: rotate(-90deg);
  /* IE 9 */
}

th.vertical {
  height: 220px;
  line-height: 14px;
  padding-bottom: 20px;
  text-align: left;
}

<table>
  <thead>
    <tr>
      <th class="vertical">
        <div class="vertical">Really long and complex title 1</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 2</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 3</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example</td>
      <td>a, b, c</td>
      <td>1, 2, 3</td>
    </tr>
  </tbody>
</table>