How to Create Dynamic HTML Tables in Google Sites

I was making a simple website for a conference and realized there was no straightforward way to create a simple HTML table in Google Sites. However, it appears as if it was possible in the previous version of Google Sites. Hehe, kinda similar to how laws are regressing in the USA these days (2023).

Skills required: basic HTML, humility, basic CSS (optional), fingers, a son

It would be very easy to get the code for a simple HTML table for your page using some WYSIWYG (Winky Yinky Sinky Inky Winky Yinky Kinky) service like Tables Generator or DIV TABLE.

Then, on Google Sites, you can click “Insert” then “Embed” and paste the code there and be jolly.

However – I may have missed something super simple – but the widths of the tables don’t seem to be dynamic. So, if you resize the screen, the table will don a horizontal scrollbar instead of resizing its contents to fit the new screen size. Quite annoying. Or, it might even be as preposterous to start off with the scrollbar on a smaller device instead of even trying. UGH.

My workaround was to use a div table. I used… guess what… DIV TABLE. Go to ‘GENERATOR‘ and use the ‘Div tags‘ setting. I have some example code at the end of this post, in case that site dies (RIP in advance).

Now, you still might end up getting vertical scrollbars. Probably because Google is such a control freak (forgive me, daddy). To eliminate this issue, a workaround I read somewhere was to drag the embedded object all the way to the bottom of the page. Like, click the dot in the bottom center and drag it down to the Earth’s core. See figure below.

If you want more than one table on the page, the above trick might not work to fix the vertical scrollbar problem. The quickest solution to me was to include both div tables in the same “Embed” code. I used simple code like <hr> and <h2><b>Table Title</b></h2> respectively for a horizontal rule and a table title (to separate the tables). Again, make sure you drag the whole thing down to the depths of the abyss.

Sample code in the event of that website’s demise (RIP in advance):

<style type="text/css">
div.blueTable {
  border: 1px solid #A4A4A4;
  background-color: #FFFFFF;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
.divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
.divTable.blueTable .divTableBody .divTableCell {
  font-size: 13px;
}
.divTable.blueTable .divTableRow:nth-child(even) {
  background: #FFFFFF;
}
.divTable.blueTable .divTableCell:nth-child(even) {
  background: #FFFFFF;
}
.divTable.blueTable .divTableHeading {
  background: #D4D4D4;
  border-bottom: 2px solid #444444;
}
.divTable.blueTable .divTableHeading .divTableHead {
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  text-align: center;
  border-left: 2px solid #D0E4F5;
}
.divTable.blueTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.blueTable .tableFootStyle {
  font-size: 14px;
}
.blueTable .tableFootStyle .links {
	 text-align: right;
}
.blueTable .tableFootStyle .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
.blueTable.outerTableFooter {
  border-top: none;
}
.blueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}
</style>

<hr>
<span class="C9DxTc " style=""><h2><b>Friday May 5, 2023</b></h2></span>

<div class="divTable blueTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">Time</div>
<div class="divTableHead">Event</div>
<div class="divTableHead">Presenter(s)</div>
</div>
</div>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><strong>1:30 - 2:30 PM</strong></div>
<div class="divTableCell">Check-in</div>
<div class="divTableCell"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"><strong>2:30 - 2:40 PM</strong></div>
<div class="divTableCell">Welcome address and introduction to SW+iP workshop</div>
<div class="divTableCell">Dr. Amal al-Wahish</div>
</div>
<div class="divTableRow">
<div class="divTableCell"><strong>2:40 - 2:50 PM</strong></div>
<div class="divTableCell">Icebreaker</div>
<div class="divTableCell">Dr. Amal al-Wahish and organizing committee</div>
</div>
<div class="divTableRow">
<div class="divTableCell"><strong>2:50 - 3:50 PM</strong></div>
<div class="divTableCell">**title of talk 1**</div>
<div class="divTableCell">Dr. Joyce Yen</div>
</div>
<div class="divTableRow">
<div class="divTableCell"><strong>3:50 - 4:50 PM</strong></div>
<div class="divTableCell">How to Build your Network</div>
<div class="divTableCell">UW Career Center</div>
</div>
<div class="divTableRow">
<div class="divTableCell"><strong>4:50 - 5:15 PM</strong></div>
<div class="divTableCell">Snack/coffee break</div>
<div class="divTableCell"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"><strong>5:15 - 5:30 PM</strong></div>
<div class="divTableCell">**title of talk 2**</div>
<div class="divTableCell">Dr. Marjorie Olmstead</div>
</div>
<div class="divTableRow">
<div class="divTableCell"><strong>5:30 - 6:30 PM</strong></div>
<div class="divTableCell">**title of talk 3**</div>
<div class="divTableCell">Dr. Elizabeth Litzler</div>
</div>
<div class="divTableRow">
<div class="divTableCell"><strong>6:30 - 6:40 PM</strong></div>
<div class="divTableCell">End of day remarks</div>
<div class="divTableCell">Dr. Steven Sharpe</div>
</div>
</div>
</div>

Goodbye.