Create Tables

Basic Table:

Now you can create tables in New Google Sites, with some very easy html.

Below is the HTML for this table. 

<body>
<h2>Test Scores</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th> 
<th>Score</th>
</tr>
<tr>
<td>Jill</td>
<td>Jackson</td>
<td>50</td></tr>
<tr>
<td>Carol</td>
<td>Crystal</td>
<td>94</td></tr>
<tr> 
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>


Table Borders:

If you want a table with cell borders, add the following to the beginning of the code:

<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>

Left Justify Headings:

To left justify the headings add the following code to the beginning of the basic code 

<head>
<style>
th, td{
    padding: 5px;
}
th {
    text-align: left;
}
</style>
</head>
</body>

Background Colour:

And you can add a background colour by adding this html code to the top of the basic code. Change the background-color: to the colour you prefer.

<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left; 
background-color: #FFEFD5;
}
</style>
</head>

Add more columns and rows:

To add more columns - using the same format, just add more lines after 

<th>Firstname</th>
<th>Lastname</th> 
<th>Score</th>

To add more rows - modify the following and add after where you see it in the code, to add another row. Repeat as needed.

<tr> 
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>

<iframe src="https://docs.google.com/spreadsheets/d/1B56Rf_LvXx-meBDrk8Ouz18uwHCEATHpdCwLgS3qPnQ/pubhtml/sheet?headers=false&gid=2106886376&range=A1:C2" width="400" height="120"></iframe>