БЛОГ НА HUSL


Реально ли сделать рамку и основную запись чертежа в html?

Автор вопроса: Mikhail

Пытался через таблицы сделать. Но как-то не получается)) шаблон четртежа

Вот таблица с основной надписью. Тогда, как сделать большую рамку и вставить вот эту таблицу. Тоже через таблицу ?

<body>
<table style="border: 3px solid #000000;">
    <tbody>
        <tr>
            <td width="26" height="18"></td>
            <td width="37" height="18"></td>
            <td width="87" height="18"></td>
            <td width="57" height="18"></td>
            <td width="37" height="18"></td>
            <td colspan="7" rowspan="3" width="453"></td>
        </tr>
        <tr>
            <td height="18"></td>
            <td height="18"></td>
            <td height="18"></td>
            <td height="18"></td>
            <td height="18"></td>
        </tr>
        <tr>
            <td height="18"></td>
            <td height="18"></td>
            <td height="18"></td>
            <td height="18"></td>
            <td height="18"></td>

        </tr>
        <tr>
            <td height="18"></td>
            <td height="18"></td>
            <td height="18"></td>
            <td height="18"></td>
            <td height="18"></td>
            <td rowspan="5" width="453"></td>
            <td colspan="3" width="78">Лит.</td>
            <td width="64">Масса</td>
            <td width="68">Масштаб</td>
        </tr>
        <tr>
            <td height="18">Изм</td>
            <td height="18">Лист</td>
            <td height="18">№ Докум.</td>
            <td height="18">Подп.</td>
            <td height="18">Дата</td>
            <td rowspan="3"></td>
            <td rowspan="3"></td>
            <td rowspan="3"></td>
            <td rowspan="3"></td>
            <td rowspan="3"></td>

        </tr>
        <tr>
            <td colspan="2" height="18">Разраб.</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2" height="18">Пров.</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2" height="18">Т.контр.</td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="3"> Лист </td>
            <td colspan="2"> Листов </td>
        </tr>
        <tr>
            <td colspan="2" height="18"></td>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="3"></td>
            <td colspan="5" rowspan="3"></td>

        </tr>
        <tr>
            <td colspan="2" height="18">Н.контр.</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2" height="18">Утв.</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Источник

Ответы (1 шт):

Автор решения: UModeL

Основная надпись чертежа.

На основе таблицы:

@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:ital,wght@1,500&display=swap');

table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  font: 4mm/1em 'Sofia Sans Extra Condensed', sans-serif;
  height: 55mm;
  width: 185mm;
  box-shadow: 0 0 0 1px #000;
}

table tr { min-height: 5mm; }

td {
  box-shadow: inset -1px -1px 0 0 #000;
  min-width: 5mm;
  padding: 0 1mm;
}

.bs_t { box-shadow: inset 0 1px 0 0 #000, inset -1px -1px 0 0 #000; }
.bs_l { box-shadow: inset 1px 0 0 0 #000, inset -1px -1px 0 0 #000; }
.bs_tl { box-shadow: inset 1px 1px 0 0 #000, inset -1px -1px 0 0 #000; }

.a_c { text-align: center; }

.h_5  { height: 5mm; }
.h_15 { height: 15mm;}
.w_5  { width: 5mm;  }
.w_7  { width: 7mm;  }
.w_10 { width: 10mm; }
.w_12 { width: 12mm; }
.w_15 { width: 15mm; }
.w_17 { width: 17mm; }
.w_18 { width: 18mm; }
.w_20 { width: 20mm; }
.w_23 { width: 23mm; }
.w_30 { width: 30mm; }
.w_70 { width: 70mm; }
<table>
  <colgroup>
    <col class="w_7">
    <col class="w_10">
    <col class="w_23">
    <col class="w_15">
    <col class="w_10">
    <col class="w_70">
    <col class="w_5">
    <col class="w_5">
    <col class="w_5">
    <col class="w_5">
    <col class="w_12">
    <col class="w_18">
  </colgroup>
  <tr>
    <td class="bs_tl">&nbsp;</td>
    <td class="bs_tl"></td>
    <td class="bs_tl"></td>
    <td class="bs_tl"></td>
    <td class="bs_tl"></td>
    <td colspan="7" rowspan="3" class="bs_tl"></td>
  </tr>
  <tr>
    <td class="bs_l">&nbsp;</td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
  </tr>
  <tr>
    <td class="bs_l">&nbsp;</td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
  </tr>
  <tr>
    <td class="bs_l">&nbsp;</td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
    <td rowspan="5" class="bs_tl"></td>
    <td colspan="3" class="bs_tl a_c">Лит.</td>
    <td colspan="2" class="bs_tl a_c">Масса</td>
    <td class="bs_tl a_c">Масштаб</td>
  </tr>
  <tr>
    <td class="bs_tl a_c">Изм.</td>
    <td class="bs_tl a_c">Лист</td>
    <td class="bs_tl a_c">№ докум.</td>
    <td class="bs_tl a_c">Подп.</td>
    <td class="bs_tl a_c">Дата</td>
    <td rowspan="3" class="bs_tl"></td>
    <td rowspan="3" class="bs_t"></td>
    <td rowspan="3" class="bs_t"></td>
    <td colspan="2" rowspan="3" class="bs_tl"></td>
    <td rowspan="3" class="bs_tl"></td>
  </tr>
  <tr>
    <td colspan="2" class="bs_tl p_1">Разраб.</td>
    <td class="bs_tl"></td>
    <td class="bs_tl"></td>
    <td class="bs_tl"></td>
  </tr>
  <tr>
    <td colspan="2" class="bs_l p_1">Пров.</td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
  </tr>
  <tr>
    <td colspan="2" class="bs_l p_1">Т.контр.</td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
    <td colspan="4" class="bs_tl p_1">Лист</td>
    <td colspan="2" class="bs_tl p_1">Листов</td>
  </tr>
  <tr>
    <td colspan="2" class="bs_l">&nbsp;</td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
    <td rowspan="3" class="bs_tl"></td>
    <td colspan="6" rowspan="3" class="bs_tl"></td>
  </tr>
  <tr>
    <td colspan="2" class="bs_l p_1">Н.конт.</td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
  </tr>
  <tr>
    <td colspan="2" class="bs_l p_1">Утв.</td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
    <td class="bs_l"></td>
  </tr>
</table>

С помощью SVG:

@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:ital,wght@1,500&display=swap');

svg {
  height: 55mm; width: 185mm;
  box-shadow: 0 0 0 2px #000;
}

.thin {
  stroke: #000;
  stroke-width: .25;
}
.thick {
  stroke: #000;
  stroke-width: .5;
}

.txt { font: 1mm/1em 'Sofia Sans Extra Condensed', sans-serif; }
.ac { text-anchor: middle; }
<svg viewBox="0 0 185 55">
  <line x1="0" y1="5" x2="65" y2="5" class="thin" />
  <line x1="0" y1="10" x2="65" y2="10" class="thin" />
  <line x1="0" y1="15" x2="65" y2="15" class="thin" />
  <line x1="0" y1="20" x2="65" y2="20" class="thick" />
  <text x="0" y="20" dx="3.5" dy="3.5" class="txt ac">Изм.</text>
  <text x="7" y="20" dx="5" dy="3.5" class="txt ac">Лист</text>
  <text x="17" y="20" dx="11.5" dy="3.5" class="txt ac">№ докум.</text>
  <text x="40" y="20" dx="7.5" dy="3.5" class="txt ac">Подп.</text>
  <text x="55" y="20" dx="5" dy="3.5" class="txt ac">Дата</text>
  <line x1="0" y1="25" x2="65" y2="25" class="thick" />
  <text x="0" y="25" dx="1" dy="3.5" class="txt">Разраб.</text>
  <line x1="0" y1="30" x2="65" y2="30" class="thin" />
  <text x="0" y="30" dx="1" dy="3.5" class="txt">Прав.</text>
  <line x1="0" y1="35" x2="65" y2="35" class="thin" />
  <text x="0" y="35" dx="1" dy="3.5" class="txt">Т.контр.</text>
  <line x1="0" y1="40" x2="65" y2="40" class="thin" />
  <line x1="0" y1="45" x2="65" y2="45" class="thin" />
  <text x="0" y="45" dx="1" dy="3.5" class="txt">Н.контр.</text>
  <line x1="0" y1="50" x2="65" y2="50" class="thin" />
  <text x="0" y="50" dx="1" dy="3.5" class="txt">Утв.</text>
  
  <line x1="7" y1="0" x2="7" y2="25" class="thick" />
  <line x1="17" y1="0" x2="17" y2="55" class="thick" />
  <line x1="40" y1="0" x2="40" y2="55" class="thick" />
  <line x1="55" y1="0" x2="55" y2="55" class="thick" />
  <line x1="65" y1="0" x2="65" y2="55" class="thick" />
  
  <line x1="65" y1="15" x2="185" y2="15" class="thick" />
  <line x1="65" y1="40" x2="185" y2="40" class="thick" />
  <line x1="135" y1="15" x2="135" y2="55" class="thick" />
  
  <text x="135" y="15" dx="7.5" dy="3.5" class="txt ac">Лит.</text>
  <text x="150" y="15" dx="8.5" dy="3.5" class="txt ac">Масса</text>
  <text x="167" y="15" dx="9" dy="3.5" class="txt ac">Масштаб</text>
  <line x1="135" y1="20" x2="185" y2="20" class="thick" />
  <line x1="135" y1="35" x2="185" y2="35" class="thick" />
  <text x="135" y="35" dx="1" dy="3.5" class="txt">Лист</text>
  <text x="155" y="35" dx="1" dy="3.5" class="txt">Листов</text>
  
  <line x1="140" y1="20" x2="140" y2="35" class="thin" />
  <line x1="145" y1="20" x2="145" y2="35" class="thin" />
  <line x1="150" y1="15" x2="150" y2="35" class="thick" />
  <line x1="155" y1="35" x2="155" y2="40" class="thick" />
  <line x1="167" y1="15" x2="167" y2="35" class="thick" />
</svg>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.