Microsoft Expression Web Data Table - Microsoft Expression Web

How to add data table in your webpage?

This chapter explains about how to add data table in your webpage. See how create a new HTML page and how to apply the Dynamic Web Template as well to your HTML page.
Step 1 – Go to the File menu and select New → Create from Dynamic Web Template…
create_from_dynamic_web_templates
Then it will open the below dialog box as shown in the following screenshot.
Step 2 − Select the master.dwt file and then click the Open button.
master_dwt
Step 3 – Now save the web page and call it datatable.html.
datatable_html
Step 4 – Go to design view and go to the main-content section and remove the text.
datatable_html
Step 5 − Next, go to the Table → Insert Table… menu option which will open the Insert Table dialog box.
Select the number of rows and columns. Now set different layout options like alignment, padding, border’s size and color, and Background color, etc. Once you are done, click OK.
insert_table
Step 6 − The Design View of datatable.html will now appear as follows −
design_view_datatable_html
Let’s see that the Code View of the page, you will see the following code is added by Expression Web.
Step 7 – Go to the Manage Styles task panel, right-click “.auto-style2”. Click the Choose rename class "auto-style2".
auto_style2
Step 8 – Now go to Rename Class dialog, enter mytable in the New name field. You have to tick the ed and then click OK.
mytable
Let’s see your web page in Design View. It will appear as follows −
your_webpage
Step 9 − To format this table and apply some style to it, go to the Manage Styles task panel and click New Style…
manage_style
Step 10 − In the New Style dialog box, set the border settings and then click Ok. You can also format your data table, right-click on the table and select Modify → Table AutoFormat…
table_autoformat
Select the different formats and other settings and click OK.
Step 11 − Now, the Design View of your web page looks as follows −
design_view_web_page
Let’s add some data in the design view.
add_some_data
Step 12 − Save your webpage and preview it in a browser. It will look like the following screenshot.
webpage_screenshot

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Microsoft Expression Web Topics