HTML таблица для использования в медицинской диагностике - PullRequest
Новая
       1

HTML таблица для использования в медицинской диагностике

0 голосов
/ 08 декабря 2018

Я пытаюсь воспроизвести следующую таблицу в HTML enter image description here

Я получил следующую структуру со следующим кодом 

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 2px solid black;
}
.vertical-text {
	transform: rotate(270deg);
	transform-origin: left top 0;
}
</style>
</head>
<body>


<table>
 <caption>Stadializarea nefropatiei diabetice</caption>
 <thead>
  <tr>
   <td rowspan="11">60</td>
   <th colspan="4"></th>
   <th colspan="4">Persistent albuminuria categories<br>Description and range
  </tr>
  </thead>
   <tbody>
  <tr>
   <td>60</td> 
   <td colspan="4"></td>
   <td>Jill</td>
   <td>Smith</td>
   <td>50</td>   
  </tr>
  <tr>
   <td>60</td> 
   <td colspan="4"></td>
   <td>Jill</td>
   <td>Smith</td>
   <td>50</td>   
  </tr>
<tr>
   <td>60</td> 
   <td colspan="4"></td>
   <td>Jill</td>
   <td>Smith</td>
   <td>50</td>   
  </tr>
<tr>
   <td>60</td> 
   <td colspan="4">Stadializarea CKD in functie<br> de filtrarea glomerulara si albuminurie</td>
   <td>Jill</td>
   <td>Smith</td>
   <td>50</td>   
  </tr>
<tr>
   <td>60</td> 
   <td colspan="4"></td>
   <td>Jill</td>
   <td>Smith</td>
   <td>50</td>   
  </tr>
<tr>
   <td>60</td> 
   <td colspan="4"></td>
   <td>Jill</td>
   <td>Smith</td>
   <td>50</td>   
  </tr>
<tr>
   <td>60</td> 
   <td colspan="4"></td>
   <td>Jill</td>
   <td>Smith</td>
   <td>50</td>   
  </tr>
<tr>
   <td>60</td> 
   <td colspan="4"></td>
   <td>Jill</td>
   <td>Smith</td>
   <td>50</td>   
  </tr>
<tr>
   <td>60</td> 
   <td>G1</td>  
   <td>Normal of high</td>
   <td>>90</td>
   <td>Stadiu</td>
   <td bgcolor="red"></td>
   <td bgcolor="blue"></td>
   <td bgcolor="orange"></td>   
  </tr>
<tr>
   <td>60</td> 
   <td>G1</td>  
   <td>Normal of high</td>
   <td>>90</td>
   <td>Stadiu</td>
   <td bgcolor="red"></td>
   <td bgcolor="blue"></td>
   <td bgcolor="orange"></td>   
  </tr>
<tr>
   <td>60</td> 
   <td>G1</td>  
   <td>Normal of high</td>
   <td>>90</td>
   <td>Stadiu</td>
   <td bgcolor="red"></td>
   <td bgcolor="blue"></td>
   <td bgcolor="orange"></td>   
  </tr>
<tr>
   <td>60</td> 
   <td>G1</td>  
   <td>Normal of high</td>
   <td>>90</td>
   <td>Stadiu</td>
   <td bgcolor="red"></td>
   <td bgcolor="blue"></td>
   <td bgcolor="orange"></td>   
  </tr>
<tr>
   <td>60</td> 
   <td>G1</td>  
   <td>Normal of high</td>
   <td>>90</td>
   <td>Stadiu</td>
   <td bgcolor="red"></td>
   <td bgcolor="blue"></td>
   <td bgcolor="orange"></td>   
  </tr>
  <tr>
   <td>60</td> 
   <td>G1</td>  
   <td>Normal of high</td>
   <td>>90</td>
   <td>Stadiu</td>
   <td bgcolor="red"></td>
   <td bgcolor="blue"></td>
   <td bgcolor="orange"></td>   
  </tr>
  </tbody>
</table>
</html>

Но я не могу: - объединить девять ячеек первого столбца (с 60-ми) с девятью ячейками второго столбца (и устранить их левую и верхнюю границу);- объединить ячейки 10-15 первого столбца, чтобы я мог ввести туда вертикальный текст;

без изменения текущего макета.Я ценю любое предложение.Есть ли более простой способ, чем HTML-таблица для реализации этого?

1 Ответ

0 голосов
/ 08 декабря 2018

Вот начальный HTML, который вам нужен: 

table, td {
border:1px solid #999;
}

td {
width: 50px;
height: 20px;
}
<table>
	<tr>
		<td colspan="4" rowspan="4"></td>
		<td colspan="3"></td>
	</tr>
	<tr>
		<td>A1</td>
		<td>A2</td>
		<td>A3</td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td rowspan="6"></td>
		<td>G1</td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>G2</td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>G3a</td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>G3b</td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>G4</td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>G5</td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...