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...