Я пытался, но не могу создать HTML-код для этой таблицы - PullRequest
Новая
       2

Я пытался, но не могу создать HTML-код для этой таблицы

0 голосов
/ 01 апреля 2019

Я не могу создать HTML-код для этой таблицы.Как это сделать? введите описание изображения здесь

Ответы [ 4 ]

3 голосов
/ 01 апреля 2019

Ошибка, с которой вы, вероятно, сталкиваетесь, заключается в том, что буква «Е» должна находиться в отдельной строке ... Конечно, есть и другие способы сделать это (в том числе не использовать таблицы). Но чтобы ответить на поставленный вами вопрос: 

    <table border=1>
      <tr>
        <td>A</td><td rowspan=2>D</td>
      </tr>
      <tr>
        <td rowspan=2>B</td>
      </tr>      
      <tr>
        <td rowspan=2>E</td>        
     </tr>
     <tr>
       <td>C</td>
     </tr>
    </table>
1 голос
/ 01 апреля 2019 

table {
  border: 2px solid ;
  border-collapse: collapse;
}
td {
  border: 2px solid;
  padding: 20px;
}
<table>
  <tr>
         <td rowspan="2">A</td>                            <td rowspan="3">D</td>
  </tr>
  <tr>
    <!-- <td rowspan="2">A</td> -->                   <!-- <td rowspan="3">D</td> -->
  </tr>
  <tr>
         <td rowspan="2">B</td>                       <!-- <td rowspan="3">D</td> -->
  </tr>
  <tr>
    <!-- <td rowspan="2">B</td> -->                        <td rowspan="3">E</td>
  </tr>
  <tr>
         <td rowspan="2">C</td>                       <!-- <td rowspan="3">E</td> -->
  </tr>
  <tr>
    <!-- <td rowspan="2">C</td> -->                   <!-- <td rowspan="3">E</td> -->
  </tr>
</table>

Или с grid

.grid {
  display: inline-grid;
  grid-template-areas: 
    "A D" 
    "A D" 
    "B D" 
    "B E" 
    "C E" 
    "C E"
  ;
  border-style: solid;
  border-width: 2px 0 0 2px;
}

.grid .a, 
.grid .b, 
.grid .c, 
.grid .d, 
.grid .e {
  padding: 20px;
  border-style: solid;
  border-width: 0 2px 2px 0;
  display: flex;
  align-items: center;
}

.grid .a {
  grid-area: A;
}

.grid .b {
  grid-area: B;
}

.grid .c {
  grid-area: C;
}

.grid .d {
  grid-area: D;
}

.grid .e {
  grid-area: E;
}
<div class="grid">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
</div>
0 голосов
/ 02 апреля 2019

Я думаю, что это поможет вам

HTML 

<table>
  <tr>
    <td rowspan="2">A</td>                            
    <td rowspan="3">D</td>
  </tr>
   <tr></tr>
  <tr>
     <td rowspan="2">B</td>                       
  </tr>
  <tr>                       
    <td rowspan="3">E</td>
  </tr>
  <tr>
     <td rowspan="2">C</td>                       
  </tr>
  <tr></tr>
</table>

CSS 

<style>
table {
  width:55%;
}
table, th, td {
  border: 3px solid black;
  border-collapse: collapse;
}
th, td {
padding: 45px 10px;
text-align: center;
font-weight: 600;
font-size: 20px;
}
</style>
0 голосов
/ 01 апреля 2019

Я не уверен, почему вы используете таблицу для этого.В любом случае, мы можем достичь этого, следуя HTML 

<!DOCTYPE html>
<html>

<head>
    <style>
        td {
            width: 100px;
            height: 100px;
        }
        table.child tr,
        table.child tr td {
            padding: 0px;
        }

        table.child,
        table.child tr {
            border: 1px solid #fff;
        }

        table.child tr td {
            border: none;
        }

        table.child,
        table.child tr,
        table.child tr td {
            border: none;
            border-collapse: collapse;
        }

        table.base,
        table.base tr,
        table.base tr td {
            border-collapse: collapse;
        }

        table.base tbody tr,
        table.base tbody tr td {
            padding: 5px;
            text-align: center;
        }
    </style>
</head>

<body>

    <h2>Table</h2>

    <table border=1 class="base">
        <tr>
            <td>
                A
            </td>
            <td rowspan=3 style="padding: 0">
                <table border=1 class="child">
                    <tr>
                        <td style="border-bottom: 1px solid">
                            D
                        </td>
                    </tr>
                    <tr>
                        <td>
                            E
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td valign=middle>
                B
            </td>
        </tr>
        <tr>
            <td>
                C
            </td>
        </tr>
    </table>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...