How to embed tables in New Google Sites ?
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.