Office of Information Technology

Transcription

1 There are several ways to add a table to your content page: Add a table from the ribbon Add a table from the reusable content library Write your table code directly in the HTML view Tables can be placed in content areas on your pages: Page Content Local Navigation, Page Content Sidebar, or Page Content Adding a Table from the Ribbon 1. Navigate to the web page in your site where the table will be inserted. 2. Select Edit Page from the Site Actions drop-down menu. 3. Click your cursor in the appropriate content area on the page where you want to insert the table. 4. Select the Editing Tools in the ribbon, click on Insert 5. Select the Table button. You will see a drop-down menu that will allow you to choose the number of rows and cells for the table. Use your cursor by clicking and dragging over the grid to select the appropriate number of rows and cells. p - ~ I c,.. ['9' ~"l' Jtcn I jl'.i ll, hdl ~,.4,,., IPMI l,t;.1 l'ii V.tDPorn 4' 1m...,--- " 6. Click on the lower right most cell in the insert table picker grid that you selected, and the table will be added t o the page. 1

2 7. A new Table Tools ribbon will appear that will allow you to configure the table. It will have sub tabs called Layout and Design Ou :z:., ["' 1"' ~,,_;i., I... It"',.,, p!, , r~... 1 l bklooll ' 1 - t) -,l 'A l..1 Jt"1 " ti,?,~ p~ Pu&~ Jc,,T1"1,Mln1 inu't'i 1!!!!1111:B ~r,,r.. n.,,-,-,t ~ ~ '"" _.,..., 100, : ;i!~'a\dl~ - JIOPi: btf»ngn. '1fat ; l)ro,,ht,g/11 no, [_~~_-_"''_"IN - _ "',_'""" - ~] " NtleYu:i,1..,._. 8. You may now type directly in each table cell to add your content. NOTE: Use the Tab key on your keyboard to switch to the next cell or add a new row at the end of your table. 9. You may edit the HTML source of the table by selecting the Format Text tab under Editing Tools on the ribbon. Select the HTML button and Edit HTML Source option. To apply style to your table, surround the table HTML code with the following <div> tag and HTML class of "contenttable". <div class="contenttable">table code goes here</div> 10. When done making your changes, you are now ready to Save and Close, Check In, or Publish the page. 2

3 Adding a Table from the Reusable Content Library The reusable content library table provides basic table HTML code. Once inserted on the page, the code is editable in the reusable content table, so you can modify it and add your own content. 1. Navigate to the web page in your site where the reusable content table will be inserted. 2. Select Edit Page from the Site Actions drop-down menu. 3. Click your cursor in the appropriate content area on the page where you want to insert the reusable content table. 4. Select the Editing Tools Insert menu in the top menu. 5. Select the Reusable Content menu item and More Choices. ~ A~ I.~ ~ ~I ] MQ t 4rPrtO QA NC< fq ata I c::qijtc f'sl'!l 9 S:!1t:1. 9 1n1...,d(P>ot«t,,IMock<ln. -.,ao.,,. 3

4 6. The following Select Reusable Content dialog box will open. Select the Content Design Elements folder. http- u, ~.. ucdcnvcr,tdu rod..,.. c~legc,.bu,,n...,idegl'c'cl.f_l,l)'ouufr<vs l> lo-.9kler,.,p, :::, 0-.,...,,. IO,,... n:o the, di 1119'.,.,,,a,,,,..:h...-"' ui,dale... be rc;cr'.-d - I..,..:_., rtr..tnc.c IO lnc onoru,11 ll'd.. be!i\j lui ailom6bcallyl.lldi:<d-., r,e,,,...,,_,of 01eor,gnal --~"'1 -wilto,tauta,oakl.lldi:.stsrse<lmm CCPVYihdlyau c,ond,onmodfy V1eV1S: Content Pte!:vte:11'11 1 Td"' Approv Status Autornabe Update Cornrne,u Reus,,ble COnlenl.:I Ccnlent Category : Adm n1st1-tn1 c- APOfO'-' C'G ;; u Cor,tcr'* o..~on Elerneru F Folc t0<;1os ia,p:)fo\icd folc L Schoel$ and Col eoes Un"er~y (nfo<m3tioi\ ApQ<O><ed Awro\led "' Cina!! Fok Folc =--:J 7. Select the Table folder. 8. Select the Table item from the list by double clicking the Table item, or click once and hit the OK button. The reusable content Table will be added to your page. l!!j Sel«t Reusable Content -- Wet,p.oge Dialog http,d-...ucd -.tdu c Id,"'"" col <ghib.,..ntnl'focu ty RtH1tdvshowc-.tl_layouWRw-.AbltTc,tP1d «,:px I I!Jl """"',., - IO,_,,.to lne- pogo. M teo w.:h..-11<\.l>co'<'.. bo,_te<j... rc.od"'11her..encc IO the O'lgl1II item.-.d.. bo ai-llcalyl.lldi!<d_..,._,_,.1...,ono,,11.i= ~"" --tau.,..,oc<olatesis...,,,~maa,py..t'i<t>you c.n lhon modfy, Os>enuot ~ Up.,11 Refre.h v,e...o: l - - Hot> Ccntenl Prev,ew - Tde API>""'"'' Stolus Automat,c Uodate Comments Reu.at>e C...ent ~rtment Cot\tent C.t0901 :J ""' blc Pcndcng No Header Heade r Header No"":; T,. '!.. c- OK 7 C c.ur~ hnp'//uw,da-,11<dt11vtudu/1c1d<emicllc~u1im«ifkully-rtsu.fc e lnltfm I Proiected Mode: On 4

5 9. A new Table Tools ribbon will appear that will allow you to configure the table. It will have sub tabs called Layout and Design f,,.. ; r...! t.w.1..- CJ.-4~..,, ~r, II P'! S,o-,-;.e P",)'!' p~ f0tl't-..ill"1 ~1,#t'I 1!!!!11:n,;,.,,,ri,.r, 1'"r,l,tr ~ ~ hbit -b 100, ;; 1.ab.~ : t;!c-1'1\dtl, IJII.. : i]llowh,,g!,1 l)p, r.:-: G,,. ~ ~. t::. t::!. ~ f.,.'1',l '"'' ~~~~5?::=:--...:.;'_. _,acbntl [_: _.. _.._... _,._t;t., _... _..,, J 10. You may now type directly in each table cell to add your content. (Tip: Use the tab key on your keyboard to switch to the next cell or add a new row at the end of your table.) 11. You may edit the HTML source of the table by selecting the Format Text tab under Editing Tools on the ribbon. Select the HTML button and Edit HTML Source option. 12. When done making your changes, you are now ready to Save and Close, Check In, or Publish the page. r.. 5