[PRAC/cont] Add "output-table" to DOM

Adding classes/attr's, contents. Init positioning, tbl/columns.

Worth noting:
  - layout without the Pixel Perfect approach.

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/crm-output.css

@@ -0,0 +1,63 @@
+.crm__output-title {
+  margin-bottom: 7px;
+  font-weight: var(--semi-bold);
+  font-size: 28px;
+}
+
+.crm__output-table {
+  min-height: 400px;
+  font-family: var(--open-sans), sans-serif;
+  font-weight: var(--regular);
+  background-color: var(--white);
+}
+
+.crm__output-table tr th {
+  border: none;
+  font-weight: var(--regular);
+  color: var(--text-gray);
+  background-color: var(--bg-page);
+}
+
+.crm__output-table tr th,
+.crm__output-table tr td {
+  /* line-height: 32px;
+  text-align: center;
+  vertical-align: middle;
+  color: var(--starry-night); */
+  cursor: pointer;
+}
+
+.crm__output-table .crm__o-table-head-cell {
+  padding-top: 5px;
+  padding-left: 20px;
+}
+
+.crm__o-table-head-cell:focus-visible {
+  outline: solid rgba(152, 115, 255, 0.5);
+}
+
+.crm__output-table #table-th-id {
+  width: 75px;
+  color: var(--main-purple);
+}
+
+.crm__output-table #table-th-fio {
+  width: 280px;
+}
+
+.crm__output-table #table-th-dt {
+  width: 180px;
+}
+
+.crm__output-table #table-th-change {
+  width: 180px;
+}
+
+.crm__output-table #table-th-contact {
+  padding-right: 30px;
+  width: 190px;
+}
+
+.crm__output-table #table-th-action {
+  padding-right: 20px;
+}

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/page.css

@@ -12,7 +12,7 @@ html {
 
 *::selection {
   color: var(--white);
-  background-color: var(--specific-gray);
+  background-color: var(--main-purple);
 }
 
 body,

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/style.css

@@ -3,4 +3,5 @@
 @import url("page.css");
 @import url("crm.css");
 @import url("crm-search.css");
+@import url("crm-output.css");
 @import url("custom-tippy.css");

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/js/index.js

@@ -62,6 +62,51 @@
   const oTableHeadThContacts = document.createElement('th');
   const oTableHeadThActions = document.createElement('th');
 
+  outputTitle.classList.add('crm__output-title');
+  outputTable.classList.add('crm__output-table', 'table', 'table-hover');
+  outputTableHead.classList.add('crm__output-table-head');
+  outputTableBody.classList.add('crm__output-table-body');
+  oTableHeadTr.classList.add('crm__o-table-head-row');
+  oTableHeadThId.classList.add('crm__o-table-head-cell');
+  oTableHeadThFIO.classList.add('crm__o-table-head-cell');
+  oTableHeadThCreationDT.classList.add('crm__o-table-head-cell');
+  oTableHeadThChanges.classList.add('crm__o-table-head-cell');
+  oTableHeadThContacts.classList.add('crm__o-table-head-cell');
+  oTableHeadThActions.classList.add('crm__o-table-head-cell');
+
+  oTableHeadThId.setAttribute('id', 'table-th-id');
+  oTableHeadThId.setAttribute('tabindex', '0');
+  oTableHeadThFIO.setAttribute('id', 'table-th-fio');
+  oTableHeadThFIO.setAttribute('tabindex', '0');
+  oTableHeadThCreationDT.setAttribute('id', 'table-th-dt');
+  oTableHeadThCreationDT.setAttribute('tabindex', '0');
+  oTableHeadThChanges.setAttribute('id', 'table-th-change');
+  oTableHeadThChanges.setAttribute('tabindex', '0');
+  oTableHeadThContacts.setAttribute('id', 'table-th-contact');
+  oTableHeadThContacts.setAttribute('tabindex', '0');
+  oTableHeadThActions.setAttribute('id', 'table-th-action');
+  oTableHeadThActions.setAttribute('tabindex', '0');
+
+  outputTitle.textContent = 'Клиенты';
+  oTableHeadThId.textContent = 'ID';
+  oTableHeadThFIO.textContent = 'Фамилия Имя Отчество';
+  oTableHeadThCreationDT.textContent = 'Дата и время создания';
+  oTableHeadThChanges.textContent = 'Последние изменения';
+  oTableHeadThContacts.textContent = 'Контакты';
+  oTableHeadThActions.textContent = 'Действия';
+
+  oTableHeadTr.append(
+    oTableHeadThId,
+    oTableHeadThFIO,
+    oTableHeadThCreationDT,
+    oTableHeadThChanges,
+    oTableHeadThContacts,
+    oTableHeadThActions
+  );
+  outputTableHead.append(oTableHeadTr);
+  outputTable.append(outputTableHead, outputTableBody);
+  crmOutput.append(outputTitle, outputTable);
+
   // ** организация появления/скрытия поля для ввода данных/фильтрационного инпута (по нажатию на logo, на 320px)
   document
     .querySelector('.crm__search-logo-img')