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

Как добавить 2 таблицы с разными настройками?

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем noob_saibot, 5 май 2022.

  1. noob_saibot

    noob_saibot

    Регистрация:
    5 май 2022
    Сообщения:
    7
    Симпатии:
    0
    Здравствуйте!

    Как добавить 2 таблицы в style.css с разными настройками?

    Просто назвать table2 {...} - и прописать здесь другие настройки? Пробовал. Не выходит так.

    style.css:

    table {
    border-collapse: collapse;
    border: 2px solid rgb(200,200,200);
    letter-spacing: 1px;
    font-size: 0.8rem;
    }
    td, th {
    border: 1px solid rgb(190,190,190);
    padding: 10px 20px;
    }
    td {
    text-align: center;
    }
    caption {
    padding: 10px;
    }
    .font {
    font-size : 18px;
    }
     
  2. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    повесить класс или id на таблицу.
    HTML:
    <table class='my-new-cool-table'></table>
    HTML:
    table.my-new-cool-table {
        rules
    }
    
    table.my-new-cool-table .td {
       rules
    }
    
    
     
  3. noob_saibot

    noob_saibot

    Регистрация:
    5 май 2022
    Сообщения:
    7
    Симпатии:
    0
    Не выходит. В чем я ошибся?

    В css прописал так:
    Код:
    *
    table.noBorder {
          letter-spacing: 1px;
          font-size: 0.8rem;
        }
    table.noBorder. td {
        padding: 10px 20px;
    }
    table.noBorder. th {
        padding: 10px 20px;
    }
    table.noBorder. td {
        text-align: center;
    }
    
    В html вот такой код:
    Код:
    *
    <table class="noBorder" id="sidebar">
      <tr>
        <td class="noBorder .td">
      <p><div class="myDivBlueBackground"><br><br><br><br>Связаться с нами
    <p>Телефон</p>
    <p>Режим работы</p>
    <p>Адрес</p>
    <p>Почта</div></p>
        </td>
        <td class="noBorder .td">
    <p class="aligncenter"><form id="noTableBorder">
        <h2 class="aligncenter">ДАВАЙТЕ ОБСУДИМ ВАШ ПРОЕКТ</h2>
        <p class="alignleft"><img src="media\images\line.png" alt="Линия"></p>
        <input type="text" name="name" placeholder="Ваше имя" style="width:100%" required /><br />
        <input type="text" name="phone" placeholder="Ваш телефон" style="width:100%" required /><br />
        <input type="text" name="email" placeholder="Ваш email" style="width:100%" required /><br />
        <button class="noTableBorder button">Отправить</button>
      </form>
      <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
      <script src="common.js"></script>
    </p>
        </td>
      </tr>
    </table>
    
    --- Добавлено, 6 май 2022 ---
    Вот сайт https://unbrokenteam.ru/

    Нужно, чтобы внизу где адрес и форма для связи, не было границ у таблицы.
    Вот полностью css:

    Код:
    * {
        margin: 0;
        padding: 0;
    }
    .myGridNoBackground{
          display: grid;
          grid-template-columns: repeat(auto-fill, 260px);
          grid-column-gap: 6px;
          margin-left: 100px;
        }
    
        .myDivBlueBackground{
          background-color: rgb(236, 247, 251);
          padding: 20px;
        }
    
        .myDivWhiteBackground{
          background-color: white;
          padding: 20px;
        }
    
        .myDivHeaderAndFooter{
          background-color: black;
        }
    
        #content {
          text-indent: 20px;
        }
    
        .grey {
          color: rgb(121, 121, 121);
          font-size: 125%;
        }
    
        .bold_text {
          font-weight: bold;
        }
    
        .aligncenter {
          text-align: center;
        }
    
        button {
          margin-top: 20px;
          margin-left: 80px;
          line-height: 38px;
          font-size: 93%;
          padding: 0 60px;
          background: white;
          border: 2px solid rgb(112, 182, 234);
          border-radius: 35px;
          
          position: relative;
          left: 45%;
          transform: translate(-55%, 0);
        }
        button:hover {
          transition: 0.3s linear;
          background: rgb(112, 182, 234);
          color: white;
        }
    
        form {
            padding: 20px;
            margin: 20px;
        }
    
    input {
      border-radius : 35px;
      padding : 10px;
      margin : 10px;
    }
    
    table {
          border-collapse: collapse;
          border: 2px solid rgb(200,200,200);
          letter-spacing: 1px;
          font-size: 0.8rem;
        }
    
        td, th {
          border: 1px solid rgb(190,190,190);
          padding: 10px 20px;
        }
    
        td {
          text-align: center;
        }
    
    table.noBorder {
          letter-spacing: 1px;
          font-size: 0.8rem;
        }
    
    table.noBorder. td {
        padding: 10px 20px;
    }
    
    table.noBorder. th {
        padding: 10px 20px;
    }
    
    table.noBorder. td {
        text-align: center;
    }
    
        caption {
          padding: 10px;
        }
    
        .font {
        font-size : 18px;
        }
    
    #noTableBorder button {
      left: 0;
      margin-left: 0;
      transform: none;
      display:  block;
    }
     
  4. noob_saibot

    noob_saibot

    Регистрация:
    5 май 2022
    Сообщения:
    7
    Симпатии:
    0
    Как добавить 2 таблицы: одну с границами, другую - без? В чем я ошибся?

    Вот страничка https://unbrokenteam.ru/pages/legal-services.html
    Нужно, чтобы разноцветная таблица была с границами, а нижняя (где можно оставить телефон и фото), чтобы была без границ.
    Повесил разные классы на 2 эти таблицы. У нижней нет границ, но почему-то у верхней их тоже нет. Хотя по идее должны быть серые границы. В классе это прописано.
    Вроде все проставил. Не выходит. В чем я ошибся?

    style.css:
    https://cloud.mail.ru/public/bMwb/Eq44NdxbY

    index.html:
    https://cloud.mail.ru/public/oVVK/3mAKXLzsz
     
  5. noob_saibot

    noob_saibot

    Регистрация:
    5 май 2022
    Сообщения:
    7
    Симпатии:
    0
    Понял, в чем дело. Может, кому пригодится.
    Не так прописал класс.
    Слитно нужно прописывать и без точек, тире и пр.
    Если нужны границы, тогда table class="tableBorder"> Если НЕ нужны границы, то table class="tableNoBorder"> –
    То же самое и для тега <td class="tableNoBordertd">...
    Если нужны границы, <td class="tableBordertd"> Если НЕ нужны границы <td class="tableNoBordertd">