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

Здравствуйте!

Как добавить 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;
}

 

Не выходит. В чем я ошибся?

В 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;
}

 

Как добавить 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

 

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