#html #css
Вопрос:
Я новичок в HTML, поэтому я в замешательстве. Приношу извинения, если я неправильно вставил код. Я только что сделал полный код. Я работаю с веб-дизайнером Google и пытаюсь создать таблицу, которая не регулирует ширину таблицы, когда текст становится слишком большим, но также хочет, чтобы текст просто регулировался внутри поля, а не регулировался в поле. Я получил код для таблицы на веб-сайте, но я видел несколько мест, где у нее есть 2 кода (таблица и CSS), но я не уверен, куда бы я поместил разные коды. Это для статической «страницы», которая на самом деле является микросайтом.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="Google Web Designer 12.0.0.0719">
<meta name="template" content="Banner 3.0.0">
<meta name="environment" content="gwd-genericad">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="gwdpage_style.css" rel="stylesheet" data-version="13" data-exports-type="gwd-page">
<link href="gwdpagedeck_style.css" rel="stylesheet" data-version="14" data-exports-type="gwd-pagedeck">
<link href="gwdattached_style.css" rel="stylesheet" data-version="2" data-exports-type="gwd-attached">
<style type="text/css" id="gwd-lightbox-style">
.gwd-lightbox {
overflow: hidden;
}
</style>
<style type="text/css" id="gwd-text-style">
p {
margin: 0px;
}
h1 {
margin: 0px;
}
h2 {
margin: 0px;
}
h3 {
margin: 0px;
}
</style>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.gwd-page-container {
position: relative;
width: 100%;
height: 100%;
}
.gwd-page-content {
background-color: transparent;
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-style: preserve-3d;
position: absolute;
}
.gwd-page-wrapper {
background-color: rgb(255, 255, 255);
position: absolute;
transform: translateZ(0px);
}
.gwd-page-size {
width: 1920px;
height: 1080px;
}
.gwd-span-1qc5 {
font-weight: bold;
}
.gwd-image-l1pp {
position: absolute;
left: 792px;
top: 697.333px;
width: 856px;
height: 305.333px;
}
.gwd-image-fc3n {
position: absolute;
left: 845.333px;
top: 705.333px;
width: 749.333px;
height: 288px;
}
.gwd-table-cz1c {
left: 0px;
top: 0px;
}
.gwd-tbody-mb6c {
left: 0px;
top: 36px;
}
.gwd-td-1o6c {
top: 187px;
left: 131px;
}
.gwd-table-8no6 {
left: 0px;
top: 0px;
}
.gwd-div-pozp {
position: absolute;
width: 197.333px;
height: 209.333px;
left: 890px;
top: 752px;
transform-style: preserve-3d;
transform: translate3d(-443px, -499px, 0px) scale3d(2.15, 2.15, 2.15);
}
.gwd-table-yoj7 {
top: 0px;
left: -841.333px;
}
.gwd-div-1x4f {
position: absolute;
width: 237.333px;
height: 109.333px;
left: 701px;
top: 289px;
transform-style: preserve-3d;
transform: translate3d(140px, 196px, 0px) scale3d(7.2, 7.2, 7.2);
}
.gwd-span-ubmi {
left: 20px;
top: 5px;
}
.gwd-span-9iad {
text-align: center;
}
.gwd-span-vv83 {
overflow: visible;
}
.gwd-span-1rkx {
left: 20px;
}
.gwd-th-rv78 {
font-weight: bold;
}
.gwd-th-31el {
font-weight: bold;
}
.gwd-th-zgs5 {
font-weight: bold;
}
.gwd-table-322z {
left: -842px;
top: 0px;
}
.gwd-thead-wahr {
left: 1px;
top: 0px;
}
.gwd-tbody-zhsb {
left: 1px;
top: 29px;
}
.gwd-div-4fre {
position: absolute;
width: 236px;
height: 108px;
left: 749px;
top: 188px;
transform-style: preserve-3d;
transform: translate3d(93px, 298px, 0px) scale3d(7.89, 7.89, 7.89);
}
</style>
<script data-source="googbase_min.js" data-version="4" data-exports-type="googbase" src="googbase_min.js"></script>
<script data-source="gwd_webcomponents_v1_min.js" data-version="2" data-exports-type="gwd_webcomponents_v1" src="gwd_webcomponents_v1_min.js"></script>
<script data-source="gwdpage_min.js" data-version="13" data-exports-type="gwd-page" src="gwdpage_min.js"></script>
<script data-source="gwdpagedeck_min.js" data-version="14" data-exports-type="gwd-pagedeck" src="gwdpagedeck_min.js"></script>
<script data-source="gwdgenericad_min.js" data-version="7" data-exports-type="gwd-genericad" src="gwdgenericad_min.js"></script>
<script data-source="gwdattached_min.js" data-version="2" data-exports-type="gwd-attached" src="gwdattached_min.js"></script>
<script data-source="gwdtexthelper_min.js" data-version="18" data-exports-type="gwd-text-helper" src="gwdtexthelper_min.js"></script>
</head>
<body>
<gwd-text-helper id="gwd-text-helper_1" fit-font-size-for-selector="[data-gwd-fit-font-size],[gwd-fitting-truncate]" data-gwd-fit-font-size="false"></gwd-text-helper>
<gwd-genericad id="gwd-ad">
<gwd-pagedeck class="gwd-page-container" id="pagedeck">
<gwd-page id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="1920px" data-gwd-height="1080px">
<div class="gwd-page-content gwd-page-size">
<style type="text/css">
.tg {
border-collapse: collapse;
border-color: #aaa;
border-spacing: 0;
margin: 0px auto;
}
.tg td {
background-color: #fff;
border-color: #aaa;
border-style: solid;
border-width: 1px;
color: #333;
font-family: Arial, sans-serif;
font-size: 14px;
overflow-wrap: break-word;
padding: 6px 20px;
word-break: normal;
}
.tg th {
background-color: #f38630;
border-color: #aaa;
border-style: solid;
border-width: 1px;
color: #fff;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
overflow-wrap: break-word;
padding: 6px 20px;
word-break: normal;
}
.tg .tg-lug7 {
background-color: #cb0000;
border-color: inherit;
font-family: Arial, Helvetica, sans-serif !important;
;
text-align: center;
vertical-align: middle
}
.tg .tg-mlfr {
border-color: inherit;
font-family: Arial, Helvetica, sans-serif !important;
;
text-align: center;
vertical-align: middle
}
.tg .tg-ms71 {
background-color: #cb0000;
border-color: inherit;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif !important;
;
text-align: center;
vertical-align: middle
}
</style>
<div class="gwd-div-4fre" data-gwd-fit-font-size="">
<table class="tg gwd-table-322z">
<thead class="gwd-thead-wahr">
<tr>
<th class="tg-ms71"><span style="font-weight: bold;">Event</span></th>
<th class="tg-lug7"><span style="font-weight: bold;">Time</span></th>
<th class="tg-lug7"><span style="font-weight: bold;">Room</span></th>
</tr>
</thead>
<tbody class="gwd-tbody-zhsb">
<tr>
<td class="tg-mlfr"></td>
<td class="tg-mlfr"></td>
<td class="tg-mlfr"></td>
</tr>
<tr>
<td class="tg-mlfr"></td>
<td class="tg-mlfr"></td>
<td class="tg-mlfr"></td>
</tr>
<tr>
<td class="tg-mlfr"></td>
<td class="tg-mlfr"></td>
<td class="tg-mlfr"></td>
</tr>
<tr>
<td class="tg-mlfr"></td>
<td class="tg-mlfr"></td>
<td class="tg-mlfr"></td>
</tr>
<tr>
<td class="tg-mlfr"></td>
<td class="tg-mlfr"></td>
<td class="tg-mlfr"></td>
</tr>
<tr>
<td class="tg-mlfr"></td>
<td class="tg-mlfr"></td>
<td class="tg-mlfr"></td>
</tr>
</tbody>
</table>
</div>
</div>
</gwd-page>
</gwd-pagedeck>
</gwd-genericad>
<script type="text/javascript" id="gwd-init-code">
(function() {
var gwdAd = document.getElementById('gwd-ad');
/**
* Handles the DOMContentLoaded event. The DOMContentLoaded event is
* fired when the document has been completely loaded and parsed.
*/
function handleDomContentLoaded(event) {
}
/**
* Handles the WebComponentsReady event. This event is fired when all
* custom elements have been registered and upgraded.
*/
function handleWebComponentsReady(event) {
// Start the Ad lifecycle.
setTimeout(function() {
gwdAd.initAd();
}, 0);
}
/**
* Handles the event that is dispatched after the Ad has been
* initialized and before the default page of the Ad is shown.
*/
function handleAdInitialized(event) {}
window.addEventListener('DOMContentLoaded',
handleDomContentLoaded, false);
window.addEventListener('WebComponentsReady',
handleWebComponentsReady, false);
window.addEventListener('adinitialized',
handleAdInitialized, false);
})();
</script>
</body>
</html>