Creating a Table in iWeb
iWeb has no native support for HTML tables but it’s a simple matter to create one using the HTML Widget
Choose the Page Type
iWeb support various page types so select the type your require. To keep this demo simple I’ve selected the Blank page template.
Adding a HTML Widget
Double click the HTML Snippet Widget to the required location on the page or double click it.
The HTML Snippet Widget
A HTML Snippet Widget HUD is displayed ready for the code to be pasted into.
The HTML Widget on Your Page
Until there is some code in the HTML it is displayed as an icon in your page.
Create a New Page
From within iWeb create a new page (1)
Adding the HTML Code
You will need some HTML to actually create the table and this needs to be pasted in to the HTML Snippet HUD.
Feel free to use this code sample as a starting point for your own tables:
<style type="text/css">
table {
width: 500px;
font-family: Helvetica;
font-size: 14px;
color: #ffffff;
background-color: #ccc;
border-spacing: 5px 5px;
border: 3px solid #ccc;
}
th {
width: 150px;
height: 35px;
color: #0f4eb1;
background-color: #ffffff;
border: 1px solid #ffffff;
}
td {
color: #0f4eb1;
font-style: italic;
text-align: center;
background-color: #ffffff;
border: 1px solid #ffffff;
}
</style>
<table>
<tr>
<th>Gifts</th>
<th>Description</th>
<th>Price</th>
<th>Buy</th>
</tr>
<tr>
<th>Hotel</th>
<td>xxx</td>
<td>xxx</td>
<td>Add to Basket</td>
</tr>
<tr>
<th>Flights</th>
<td>xxx</td>
<td>xxx</td>
<td>Add to Basket</td>
</tr>
<tr>
<th>Food</th>
<td>xxx</td>
<td>xxx</td>
<td>Add to Basket</td>
</tr>
</table>
Your Table Displayed in iWeb
Once there is code pasted in the HTML Snippet Widget and you click Apply your table will replace the HTML Widget icon and will be displayed on your page.
