Не задается размер ячейки таблицы

@Fuzy · Регистрация: 18.11.2016

Author24 — интернет-сервис помощи студентам

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home Work №4</title>
<style>
td{
    border:1px solid black;
}
.table {
    border:3px solid green;
    width:580px;
    height:600px;
}
.content{
    width: 550px;
    height: 100px;
    border:2px solid red;
    margin-left: 10px; 
  margin-top: 10px;
    
}
.cont{
    width: 550px;
    height: 50px;
    border:2px solid red;
      margin-top: 10px;
    margin-left: 10px;
}
.con{
    border:2px solid red;
    width: 550px;
    height: 300px;
    margin-top: 10px;
    margin-left: 10px;
}
.coner{
    width: 550px;
    height: 90px;
    border:2px solid red;
    margin-left: 10px; 
  margin-top: 10px;
    
}
 
.conter{
 border:2px solid blue;
}
.bd{
 border:2px solid blue;
 width:100px;
 height:30px;
}
</style>
</head>
<body>
<table class="table"><!— вот тут padding - не имеет смысла для таблиц вообще —> 
<tr><td style="padding-bottom: 10px;">
<table class="content">
    
</table>
<table class="cont">
    <tr>
        <td style="height:15px">&nbsp</td>
        <td class="bd">&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
</table>
<table class="con">
    <tr>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
</table>
<table class="coner">
        <tr>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
</table>
</td></tr>
 
</table>
 
</body>
</html>

Вот сам код не могу задать размер ячейки в чём может быть проблема?

@mrtoxas · 07.01.2017, 14:50

У вас есть Microsoft Excel под рукой, или другой редактор таблиц? Попробуйте задать высоту только одной ячейки.

@Fuzy · 07.01.2017, 15:09 **[ТС]**

Пробовал задавать width задается , а height нет

@mrtoxas · 07.01.2017, 15:13

Fuzy, объяснять или после манипуляций с табличными редакторами стало понятно?

Вы можете попробовать визуально сделать эту ячейку меньше, задав ей border, используя псевдоэлементы.

@Fuzy · 07.01.2017, 15:20 **[ТС]**

Можно пример пожалуйста если не сложно , а то не понял

@mrtoxas · 07.01.2017, 15:33

HTML5

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    table {
      border-collapse: collapse;
    }
    
    table td {
      width: 100px;
      height: 50px;
    }
    
    table td:not(.original) {
      border: 1px solid black;
    }
    
    .original {
      position: relative;
    }
    
    .original:after {
      content: '';
      position: absolute;
      top: 5px;
      bottom: 5px;
      left: 0;
      right: 0;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
    }
  </style>
</head>
 
<body>
  <table>
    <tr>
      <td></td>
      <td></td>
      <td class="original">
      </td>
      <td></td>
    </tr>
  </table>
</body>
 
</html>

@Fuzy · 07.01.2017, 15:39 **[ТС]**

А по другому не как не можно задать? а то мне много ячеек нужно сделать ,а таким методом это сложно

У меня просто вообще получилась ячейка в ячейке ...

@mrtoxas · 07.01.2017, 15:49

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

Есть еще вариант, вкладывайте div'ы в td. И задавайте border div'ам, а не ячейкам. А ячейки используйте просто в качестве каркаса.

Сообщение от Fuzy

У меня просто вообще получилась ячейка в ячейке

Потому что, вы задали border всем ячейкам, а надо было задать всем, кроме той, которую вы собрались менять. Я же сказал, что высоту отдельной ячейки можно поменять только визуально.

@Fuzy · 07.01.2017, 16:19 **[ТС]**

На дивах я сделал , а вот на таблицах не как не могу и ещё мне нужно точно такая как на дивах и это каждой ячейке высоту задавать??

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home Work N4</title>
</head>
<body>
    <div style="border: 4px solid green; width: 580px;height: 600px">
 
        <div style="border:4px solid red; width: 550px;height: 80px;margin: 10px">
 
            <div style="border:4px solid blue; width: 140px;height: 50px;margin: 10px;float:left;margin-left: 10px;margin-right: 1px;"></div>
 
            <div style="border:4px solid blue; width: 220px;height: 50px;margin: 10px 1px; float:left"></div>
 
            <div style="border:4px solid blue; width: 140px;height: 50px;margin: 10px 1px;float:left">
                <div style="border:4px solid yellow; width:110px;height: 10px; margin: 10px 1px;float:left;margin-left: 10px;margin-right: 10px;margin-bottom: 1px;margin-top: 5px;"></div>
                <div style="border:4px solid yellow; width:110px;height: 10px; margin: 10px 1px;float:left;margin-left: 10px;margin-right: 10px;margin-bottom: 5px;margin-top: 1px;"></div>
            </div>
 
        </div>
        <div style="border:4px solid red; width: 550px;height: 40px;margin: 10px; float:left">
            <div style="border:4px solid blue; width: 130px;height: 15px;margin: 10px; float:left;margin-right: 1px;"></div>
            <div style="border:4px solid blue; width: 115px;height: 15px;margin: 10px; float:left;margin-left: 1px;margin-right: 1px;"></div>
            <div style="border:4px solid blue; width: 115px;height: 15px;margin: 10px; float:left;margin-left: 1px;margin-right: 1px;"></div>
            <div style="border:4px solid blue; width: 130px;height: 15px;margin: 10px; float:left;margin-left: 1px;"></div>
        </div>
 
        <div style="border:4px solid red; width: 550px;height: 300px;margin: 10px; float:left">
 
            <div style="border:4px solid blue; width: 150px;height: 270px;margin: 10px; float:left;margin-right: 1px;"></div>
 
            <div style="border:4px solid blue; width: 340px;height: 270px;margin: 10px; float:left">
                <div style="border:4px solid yellow; width: 310px;height: 200px;margin: 10px; float:left;margin-bottom: 1px;"></div>    
                <div style="border:4px solid yellow; width: 310px;height: 25px;margin: 10px; float:left"></div>
            </div>
 
        </div>
 
        <div style="border:4px solid red; width: 550px;height: 70px;margin: 10px; float:left">
            <div style="border:4px solid blue; width: 140px;height: 43px;margin: 10px; float:left;margin-right: 1px;">
                <div style="border:4px solid yellow; width:110px;height: 7px; margin: 10px 1px;float:left;margin-left: 10px;margin-right: 10px;margin-bottom: 1px;margin-top: 5px;"></div>
                <div style="border:4px solid yellow; width:110px;height: 7px; margin: 10px 1px;float:left;margin-left: 10px;margin-right: 10px;margin-bottom: 5px;margin-top: 1px;"></div>
            </div>
 
            <div style="border:4px solid blue; width: 220px;height: 43px;margin: 10px 2px 10px; float:left;margin-left: 1px;margin-right: 1px;"></div>
 
            <div style="border:4px solid blue; width: 140px;height: 43px;margin: 10px 2px 10px; float:left;margin-left: 1px;margin-right: 10px;"></div>
        </div>
 
    </div>
</body>
</html>

@mrtoxas · 07.01.2017, 19:52

Сообщение от Fuzy

мне нужно точно такая как на дивах

Я в вашей "блочной работе" не вижу ту ячейку, которую надо уменьшить - они у вас все одинаковые.

@Fuzy · 08.01.2017, 12:18 **[ТС]**

Ну вот то что на дивах получилось нужно так же на таблице сделать основной каркас я сделал , а дальше не могу размер задать чтоб все как на фото было

@mrtoxas · 08.01.2017, 12:28

Fuzy, То, что вы пытаетесь создать таблицу, такую же, как вы создали при помощи блоков, это уже давно понятно. Тема называется "Не задается размер ячейки таблицы". Размер какой именно ячейки вы не можете задать? Покажите стрелочкой на вашем последнем скрине, где именно та ячейка, размер которой надо задать.

@Fuzy · 08.01.2017, 12:38 **[ТС]**

1 скрин это как нужно , а на 2 видно где не получается ...

@mrtoxas · 08.01.2017, 13:13

Вам, наверное, стоит понять разницу между такими понятиями, как отступы и размеры. Она существует. Откройте справочники по таблицам и посмотрите как они создаются и при помощи каких стилей.

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    table {
      width: 500px;
      border: 3px solid green;
      border-spacing: 5px 10px;
      padding: 0 5px;
    }    
    table .unknown td {
      border: 1px solid blue;
      height: 30px;
    }
  </style>
</head>
<body>
  <table>
    <tr class="unknown">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</body>
</html>

@Fedor92 · 08.01.2017, 13:22

Добавляем стиль:

CSS

1	*{box-sizing:border-box}

Используем код, который дал mrtoxas и у Вас получится аккурат 30px по высоте...   - можно убрать из кода... Остальные ячейки аналогично...

@Fuzy · 10.01.2017, 12:52 **[ТС]**

Размер меняется вместе с строкою , а мне нужно размер для конкретной ячейки задать

@Fedor92 · 10.01.2017, 13:00

Сообщение от Fuzy

Размер меняется вместе с строкою , а мне нужно размер для конкретной ячейки задать

А Вы хорошо представляете себе, что такое таблица? Если несколько ячеек находятся в одной строке, то высота любой ячейки будет равна максимальной высоте ячейки в данной строке...

@Fuzy · 10.01.2017, 13:08 **[ТС]**

У меня ячейки одинакового размера мне главное чтоб строка в размере не менялась , а в свой код задать я так не могу ячейки в плотную к строке прижаты...

@Fedor92 · 10.01.2017, 13:28

Сообщение от Fuzy

Вот сам код не могу задать размер ячейки в чём может быть проблема?

Сообщение от Fuzy

Пробовал задавать width задается , а height нет

Вы уже всех запутали и сами запутались... Вопрос Ваше темы: "Не задается размер ячейки таблицы"... Я Вам на него и отвечаю...

Сообщение от Fuzy

У меня ячейки одинакового размера мне главное чтоб строка в размере не менялась

Если меняется высота ячейки - меняется и высота строки... А теперь немного повангуем... Наверно Вы хотите сделать отступ между границами строки и границами ячеек? Тогда Вам в помощь свойство border-spacing, если нет, то пора менять формулировку вопроса и желательно с картинками...

@mrtoxas · 10.01.2017, 13:36

Сообщение от Fuzy

Мне нужно размер для конкретной ячейки задать

Сообщение от Fuzy

У меня ячейки одинакового размера...

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

Сообщение от Fedor92

желательно с картинками

В 13м посте это уже проходили.

Fuzy, зря вы сразу замахнулись на весь каркас. Вам бы начать с одной маленькой таблички на 4 ячейки. Открыть справочник, посмотреть как строится таблица, какие стили ей можно задать. Не плохо бы разобраться в том, что вообще из себя представляет таблица.

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	07.01.2017, 14:50	2
	У вас есть Microsoft Excel под рукой, или другой редактор таблиц? Попробуйте задать высоту только одной ячейки. 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	07.01.2017, 15:09 [ТС]	3
	Пробовал задавать width задается , а height нет 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	07.01.2017, 15:13	4
	Fuzy, объяснять или после манипуляций с табличными редакторами стало понятно? Вы можете попробовать визуально сделать эту ячейку меньше, задав ей border, используя псевдоэлементы. 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	07.01.2017, 15:20 [ТС]	5
	Можно пример пожалуйста если не сложно , а то не понял 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	07.01.2017, 15:39 [ТС]	7
	А по другому не как не можно задать? а то мне много ячеек нужно сделать ,а таким методом это сложно У меня просто вообще получилась ячейка в ячейке ... Миниатюры 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	07.01.2017, 15:49	8
	А кто говорил, что будет легко? Вот эти мучения вам и дадут понять, что таблицы для этих целей лучше не использовать. И да, я знаю, что это только обучения ради Есть еще вариант, вкладывайте div'ы в td. И задавайте border div'ам, а не ячейкам. А ячейки используйте просто в качестве каркаса. Сообщение от Fuzy У меня просто вообще получилась ячейка в ячейке Потому что, вы задали border всем ячейкам, а надо было задать всем, кроме той, которую вы собрались менять. Я же сказал, что высоту отдельной ячейки можно поменять только визуально. 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	07.01.2017, 19:52	10
	Сообщение от Fuzy мне нужно точно такая как на дивах Я в вашей "блочной работе" не вижу ту ячейку, которую надо уменьшить - они у вас все одинаковые. 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	08.01.2017, 12:18 [ТС]	11
	Ну вот то что на дивах получилось нужно так же на таблице сделать основной каркас я сделал , а дальше не могу размер задать чтоб все как на фото было Миниатюры 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	08.01.2017, 12:28	12
	Fuzy, То, что вы пытаетесь создать таблицу, такую же, как вы создали при помощи блоков, это уже давно понятно. Тема называется "Не задается размер ячейки таблицы". Размер какой именно ячейки вы не можете задать? Покажите стрелочкой на вашем последнем скрине, где именно та ячейка, размер которой надо задать. 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	08.01.2017, 12:38 [ТС]	13
	1 скрин это как нужно , а на 2 видно где не получается ... Миниатюры 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	10.01.2017, 12:52 [ТС]	16
	Размер меняется вместе с строкою , а мне нужно размер для конкретной ячейки задать 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	10.01.2017, 13:00	17
	Сообщение от Fuzy Размер меняется вместе с строкою , а мне нужно размер для конкретной ячейки задать А Вы хорошо представляете себе, что такое таблица? Если несколько ячеек находятся в одной строке, то высота любой ячейки будет равна максимальной высоте ячейки в данной строке... 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	10.01.2017, 13:08 [ТС]	18
	У меня ячейки одинакового размера мне главное чтоб строка в размере не менялась , а в свой код задать я так не могу ячейки в плотную к строке прижаты... 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	10.01.2017, 13:28	19
	Сообщение от Fuzy Вот сам код не могу задать размер ячейки в чём может быть проблема? Сообщение от Fuzy Пробовал задавать width задается , а height нет Вы уже всех запутали и сами запутались... Вопрос Ваше темы: "Не задается размер ячейки таблицы"... Я Вам на него и отвечаю... Сообщение от Fuzy У меня ячейки одинакового размера мне главное чтоб строка в размере не менялась Если меняется высота ячейки - меняется и высота строки... А теперь немного повангуем... Наверно Вы хотите сделать отступ между границами строки и границами ячеек? Тогда Вам в помощь свойство border-spacing, если нет, то пора менять формулировку вопроса и желательно с картинками... 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	10.01.2017, 13:36	20
	Сообщение от Fuzy Мне нужно размер для конкретной ячейки задать Сообщение от Fuzy У меня ячейки одинакового размера... Вы так и не посмотрели разницу между размером и отступом? Вы вообще читаете, что вам пишут? Я вам привел код, где ячейки не прижаты вплотную и соответствуют вашему макету. Сообщение от Fedor92 желательно с картинками В 13м посте это уже проходили. Fuzy, зря вы сразу замахнулись на весь каркас. Вам бы начать с одной маленькой таблички на 4 ячейки. Открыть справочник, посмотреть как строится таблица, какие стили ей можно задать. Не плохо бы разобраться в том, что вообще из себя представляет таблица. 0