How to embed tables in New Google Sites ?
Last Updated :
10 Sep, 2020
Sometimes, we have to display some data in a systematic manner, to do so we use tables. To embed the table in Google sites follow the steps:
Select embed option from the insert panel and then go to embed code division of the dialogue box appeared.
Write your iframe code in the space provided.
- To insert a border-less table use the following code:
HTML
<body>
<h2>Test Scores</h2>
<table style="width:100%">
<tr>
<th>Geek Name</th>
<th>Score</th>
</tr>
<tr>
<td>Geek 1</td>
<td>50</td>
</tr>
<tr>
<td>Geek 2</td>
<td>94</td>
</tr>
</table>
</body>
|
- To add a bordered table just use the following code:
HTML
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Test Scores</h2>
<table style="width:100%">
<tr>
<th>Geek Name</th>
<th>Score</th>
</tr>
<tr>
<td>Geek 1</td>
<td>50</td>
</tr>
<tr>
<td>Geek 2</td>
<td>94</td>
</tr>
</table>
</body>
|
- To add a table with some background color use the following code:
HTML
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 15px;
text-align: left;
background-color: lightGreen;
}
</style>
</head>
<body>
<h2>Test Scores</h2>
<table style="width:100%">
<tr>
<th>Geek Name</th>
<th>Score</th>
</tr>
<tr>
<td>Geek 1</td>
<td>50</td>
</tr>
<tr>
<td>Geek 2</td>
<td>94</td>
</tr>
</table>
</body>
|
You can change the style and content of the table as per your requirement.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...