Transcript 301-designing-tables-slides

Drupal Training Series
Discover Drupal 6
Designing Tables
This work is licensed under a Creative Commons AttributionNonCommercial-ShareAlike 3.0 United States License
What We’ll Be Covering…
Data Table Formatting
• HTML Data Table
– Ex 01 Paste HTML Data Table
• Formatting Data Table Elements
–
–
–
–
Ex 02 Delete Rows
Ex 03 Adjust Column Widths
Ex 04 HTML Breaks
Ex 05 Align Text
Image Layout
• Embedding Images
– Ex 06 Create Basic Table
– Ex 07 Insert Images Into Table
• Captioning Images
– Ex 08 Add Row Method
– Ex 09 Add Text With HTML Break
Table Styling
• Using the CSS Style Editor
–
–
–
–
Ex 10 Positioning
Ex 11 Gridlines
Ex 12 Background Colors
Ex 13 Cell Content Margin Adjustment
Video Player Layout
• Video Player Properties
– Ex 14 Advanced Table Layout
Summary
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
Getting Started
As a reminder, to get to the Discover Drupal 6 training site, go to:
http://drupaldev.cws.oregonstate.edu/training/discover-drupal-6/login
From there, log in with your ONID information.
After logging in, please click on the Designing Tables Materials
link in the External Resources menu block, which will take you to
WebTrain and the training materials located at:
http://oregonstate.edu/cws/training
After downloading these items to your desktop, you will need to
extract them.
To return to the Discover Drupal 6 site, just click back on your
browser.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
Before We Begin
Please note that you will need to use Mozilla Firefox for this
workshop.
Clicking into a table and selecting it’s sub-components is currently
not possible in Internet Explorer.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
4
Data Tables: Overview
On occasion, you may find a need to copy a data table from a web
page into your own Drupal site.
Fortunately, tables that use valid HTML and CSS will typically
transfer over quite nicely.
There will, most likely, be some changes that occur. This is due to
the fact that your theme’s CSS will probably differ from the CSS
files used on the original page.
We’ll start this workshop by working with a copied data table
from a different site and adjusting its various table elements to
achieve the appearance we want.
Note: It is strongly suggested that tables built in a word processing application should not be pasted
directly into the WYSIWYG Editor. The outcome generally is not good.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
5
Data Tables: Ex. 01 Paste HTML Table – Copy Table
2
1
First we need an HTML table to copy, so let’s
borrow one from CWS:
1. Open another tab in your browser
2. Enter the following URL:
http://oregonstate.edu/cws/drupal-6/permissions
3. Select the table by highlighting all of its
cells with your mouse and copy the table
by pressing your Ctrl + C keys
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
6
3
Data Tables: Ex. 01 Paste HTML Table – Create Page
Now return to the Discover Drupal 6 site
and create a page in which to paste the
table:
1
2
3
4
1. Click Create content > Page
5
2. Title field = your choice
3. Menu link title field = your choice
4. Parent item field = <Primary Links>
5. Weight option = Leave at 0
6. Input format option = Full HTML
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
7
Data Tables: Ex. 01 Paste HTML Table – Paste Table In
2
Now just paste in the table as if it were any
other paste job:
1. Click your mouse into the Body field to
set your cursor
1
You may want to enter a carriage return prior to
pasting to provide working space above table
2. Press your Ctrl + V keys, or click the
Paste tool button from the toolbar
3. Click the Save button
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
8
Data Tables: Ex. 01 Paste HTML Table – Completed Paste
The completed paste job transfers
over fairly well, but there are some
changes that you may wish to make
such as:
• Row or column deletion
• Table headers
• Column width & consistency
• Text alignment
So let’s take a few minutes and figure
out how to format some of these
items.
Click on your page’s Edit tab.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
9
Data Tables: Ex. 02 Delete Rows – Row Deletion Process
Perhaps the first thing you may notice about
this table is that it’s very long – more so
than we actually need. To delete some of
these rows, do the following:
1. In your editor, scroll down to the row
that says Content Module, click your
cursor into there and select all the way
down the table.
2. Click the Delete row button
2
1
The result is not what you would probably
expect. The deletion only occurred on one row
– the one with the Content Module title. Each
row must be deleted, one at a time.
Starting at the bottom row of the table delete
each row up to the Use PHP input for field
settings row.
3. Click the Save button
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
10
Data Tables: Ex. 02 Delete Rows – Completed
The table is now shortened to a more
manageable length.
Now let’s move on to adjusting some
header properties.
Click the Edit tab to proceed.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
11
Data Tables: Ex. 03 Adjust Headers – General Cell Properties
Table Headers actually have their
own properties in an HTML table,
let’s take a look at this:
1. Click into the Permission column
2. Click the Cell Properties button
and on the General tab, enter
the following settings
2
1
a
c
a. Alignment = Center
b. Cell type = Header
3
c. Vert Align = Top
d. Scope = Row
3. In the lower left selection box,
choose the Update all cells in
row option
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
12
b
d
Data Tables: Ex. 03 Adjust Headers – Advanced Cell Properties
Now let’s set some advanced
properties:
1. Click on the Advanced tab
2. In the Style field, enter the
following CSS property setting,
exactly as written below,
including all punctuation:
1
2
font-size: 10pt;
3
3. Choose a Background color –
the one used in the example is
#d85a1a
4
4. Click the Update button
5. Click the Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
13
Data Tables: Ex. 03 Adjust Headers – Completed
The completed table header
stands out a bit more.
Now, click the Edit tab, and we’ll
turn our attention to adjustment
of the column widths.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
14
Data Tables: Ex. 04 Adjust Column Widths – Table Cell Properties
We have six total columns, with one of
those columns operating in a descriptive
fashion – the text requirements are
longer here. We’ll size the narrower
columns to 12% of the total width each
and leave the larger difference to the
first column:
1. Click within the Anonymous User
column
2. Click the Table cell Properties
button
3. In the Width field, enter 12%
4. Click the Update button
Repeat this process for all columns to
the right. Click the Save button when
finished.
2
1
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
15
Data Tables: Ex. 04 Adjust Column Widths – Completed
The columns are nice and even now.
But we can see that the text in the
header is not behaving the way we’ve
configured it to. It should be centered.
Click the Edit tab and let’s figure out how
to fix this.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
16
Data Tables: Ex. 05 Align Text – Inline CSS Property Method
Text alignment is sometimes a hit and
miss operation in a WYSIWIG web editor.
We can still adjust this by manually
setting an in-line style. Let’s set the
leftmost header to align left and the
other headers to align center
1. Click within the Permission column
2. Click the Cell Properties button
3. Click the Advanced tab
4. In the Style field, enter the following
CSS property setting, exactly as
written below:
2
3
1
4
5
text-align: left; (for Permission column)
5. Click the Update button
Repeat this process for all column headers
to the right using the text-align: center;
property setting. When finished, click the
Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
17
Data Tables: Ex. 05 Align Text – Inline CSS Property Method - Completed
The headers now look pretty good.
There still remains some alignment issues
that can be addressed, though – such as the
x marks. For a nice appearance in this table,
these should probably be centered.
Click the Edit tab and let’s use the Align
center tool button to center align the x
marks.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
18
Data Tables: Ex. 05 Align Text – Align Center Tool Method
Unfortunately, there’s no way to
select a subgroup of cells within a
row and do a bulk property change.
Operations such as this must be
performed one at a time. In cases
like this, the Align center tool is
often the quickest approach:
1. Click into the first cell with an x
mark in it
2. Click the Align center tool
button
2
1
Repeat this process until all x marks
are center aligned
3. Click the Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
19
Data Tables: Ex. 05 Align Text – Align Center Tool Method - Completed
Things are starting to look pretty good
by now.
A few more things can be done to
better clarify the sub-groups in the
table, though. The first would be to
apply an indent on items that fall
under the table’s categories.
Click the Edit tab and we’ll use the
Indent tool button for this.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
20
Data Tables: Ex. 05 Align Text – Indent Tool
Just like with center alignment,
formatting an indent is a oneat-a-time process. To indent
sub-items, do the following:
1. Click into the first subitem’s row
2. Click the Indent tool
button
2
1
Repeat this process until all subitems are indented
3. Click the Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
21
Data Tables: Ex. 05 Align Text – Indent Tool - Completed
The table is much easier to read now.
Let’s add a touch of professionalism,
though, by adding a few additional
formats.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
22
Data Tables: Now You Do It
A background color applied to the table’s category items would look nice. Additionally,
an italic format on the sub-items would further break up the monotony of the page and
make it more interesting, visually. Take the next five minutes and apply these format
changes.
Category Item Backgrounds
1. Click into the first category row
2. Click the Table cell properties button
Sub-Item Italics
The italic (and bold) settings can be performed in
bulk operations:
1. Select the entire first group of sub-items
3. Click on the Advanced tab
2. Click the Italics tool button
4. Choose a Background color
Repeat this process until all sub-items are italicized
5. Click the Update button
3. Click the Save button
Repeat this process until all category items have been
changed
6. Click the Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
23
Data Tables: Completed
The result is a nicely dressed up and easy to
read data table.
So now that we have a little experience with
data tables, it’s time to ratchet things up a
bit and do some table layout with images.
Click the Edit tab to begin…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
24
Image Layout: Overview
Table layout was the original method by which images and text
were arranged on a web page.
Over the past several years, Cascading Style Sheets (CSS) have
been replacing tables in popularity due to the ease, flexibility, and
consistency that CSS offers.
Tables still serve a purpose, though:
• Good for data organization
• Provides a visual “framework” for content layout which is
helpful for users who do not know CSS
The following workshop will focus specifically on how to work
with table layout for multimedia and styling tables.
Note: It is strongly suggested that tables not be pasted directly into the WYSIWYG Editor. The
outcome generally is not good.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
25
Image Layout: Ex. 06 Create a Basic Table – Create Page
1
First, create the page:
1. Click Create content > Page
2. Title field = your choice
3. Menu link title field = your choice
4. Parent item field = <Primary Links>
5. Weight option = Leave at 0
6. Input format option = Full HTML
7. Body field = paste in ex-06.doc
2
3
4
5
7
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
26
Image Layout: Ex. 06 Create a Basic Table – Enter Table Information
To insert a Table, do the following:
1. From the end of your text, hit
the Enter key a few times to
create some space
2
3
2. Click on the Inserts a new table
button to open the Insert /
Modify Table dialog box
3. Enter the following settings:
Columns = 3
Rows = 1
Cellpadding = 2
Cellspacing = 2
Align = Center
Border = 0
1
4
4. Click the Insert button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
27
Image Layout: Ex. 06 Create a Basic Table – Resize Table
To resize the table on the screen:
1. Click on the faint grid in the
center of the editor
2. A box with handles appears
to the left – click on a handle,
hold the mouse key down,
and stretch the box open
1
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
28
Image Layout: Ex. 07 Insert Images Into Table
Now it’s time to insert some images in the
table. Place your cursor inside the leftmost
cell and do the following:
1. Insert the drupal-kung-fu-01.png file
from the content-images folder in the
File Browser
2. Enter the file name into both the
Image description and Title fields on
the General tab
3. Click on the Appearance tab
4. Enter 150 for the first Dimension field
5. Enter 2 for both the Vertical space and
Horizontal space fields
6. Click the Insert button
1
2
3
4
5
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
29
Image Layout: Ex. 07 Insert Images Into Table – Now You Do It
Two final table cells need images embedded in them. Using the
information below, embed the provided images into your Book
page.
Center Cell
Right Cell
Directory = content-images
Directory = content-images
Image = drupal-kung-fu-2.jpg
Image = drupal-kung-fu-3.jpg
Enter information on General tab:
Enter information on General tab:
Image description field = all smalls, no
spaces
Image description field = all smalls, no
spaces
Title field = Regular text is ok
Title field = Regular text is ok
Enter information on Appearance tab:
Enter information on Appearance tab:
Dimension field 1 = 150
Dimension field 1 = 150
Horizontal field = 2
Horizontal field = 2
Vertical field = 2
Vertical field = 2
Click Insert button
Click Insert button
When finished, click the Save button.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
30
Image Layout: Ex. 07 Insert Images Into Table – Completed Image Insertion
The completed image insertion should
look similar to what’s at right
Now click on the Edit tab and let’s take a
look at some table operations…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
31
Image Layout: Captioning Images - Overview
To date, there is no built-in captioning tool available in the
WYSIWIG editor that will provide on-screen captions for images.
The only option that provides any type of “captioning” capability
is the Title field in the Insert/Edit image dialog box, which
provides a pop up tool tip when a mouse hovers over an image.
There are a couple of different methods at our disposal for
captioning, though:
• Add a row and enter captions underneath image embeds
• Use an HTML Break tag (<br />) to position a caption directly beneath
an image, within the same cell
We’ll try our hand at both methods.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
32
Image Layout: Ex. 08 Caption Method 1 – Add Row
First, let’s add a row to the bottom of
the table using Insert row after button:
1. Place the cursor inside any cell
2
2. Click on the Insert row after tool
button
3. A new row appears beneath the
images
1
4
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
33
4. Place the cursor in the left bottom
cell
Image Layout: Ex. 08 Caption Method 1 – Add & Format Caption Text
And, finally, the captions:
1. Inside the left cell, type Drupal
Kung Fu 01
2. Add a bold effect to the text
using the Bold tool button
3. Select the caption and center it
using the Center Align tool
button
Repeat the process on the
remaining center and right bottom
cells.
Click the Save button when all
captions have been added.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
3
1
34
Image Layout: Ex. 08 Caption Method 1 – Completed
The final image captions should appear
similar to the image at left.
Now let’s try the second method, which is a
little more sophisticated.
Click the Edit tab to open your page…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
35
Image Layout: Ex. 09 Caption Method 2 – Copy & Paste Text
To get started, just copy, cut, and paste the original captions
directly after each image – don’t enter down – just paste inline so
that your layout looks similar to what’s shown.
It will look somewhat messy – this is expected.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
36
Image Layout: Ex. 09 Caption Method 2 – Opening Source Editor
To perform this exercise, we’re going to have to take a look into
the HTML code that is used by your web page.
To open the source code editor, click on the Edit HTML source
button in your toolbar.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
37
Image Layout: Ex. 09 Caption Method 2 – Exploring Table HTML
The source code editor isn’t the friendliest
in terms of code formatting – the example
at right has been cleaned up and
formatted in a more sophisticated source
code editor so it’s easier to understand.
You’ll note a few things:
• Most HTML code requires a start tag
<> and a stop tag </>
The few exceptions are a line break(<br />), a
horizontal rule (<hr />), a comment (<!-- -->),
and an image (<img />)
As can be seen, an HTML table structure is
nested – the table body is split up
horizontally into rows (<tr>). The rows are
then split up vertically into columns (<td>).
• The function of the tags you see are
as follows:
– <table> = general table properties
– <tbody> = table body
– <tr> = table row
– <td> = table data (or cell)
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
It’s this structure that makes tables difficult on
screen readers for the visually impaired
38
Image Layout: Ex. 09 Caption Method 2 – Inserting Break Tags
One way to get a caption to move directly
beneath an image is to insert an HTML break
tag (<br />) before the starting bold tag
(<strong>) of the caption:
1. Search for the text in your caption
1
You can do this more efficiently by hitting your
Ctrl + F keys simultaneously and entering a
keyword in the search box that opens
2
2. Once you’ve found your caption, enter
the tag <br />, exactly as shown in the
image at left
Repeat this process for all three images
3. Click the Update button
When finished, click the Preview button.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
39
Image Layout: Ex. 09 Caption Method 2 – Adjust Cell Properties
In Preview, you’ll see that the captions
are left-aligned – let’s center the
images and the captions of all the cells
in one swoop:
2
1. Insert your cursor into the first
cell
3
2. Click the Table cell properties
button to open the dialog box
1
3. Set the Alignment field to Center
4
4. Select Update all cells in row at
bottom left of window
5
5. Click the Update button
When finished, click the Save button.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
40
Table Styling: Overview – CSS and Tables
In the Drupal 6 Basics workshop we learned how CSS can affect
text properties such as color and size.
CSS can do quite a bit more, though.
It can be used for positioning objects, sizing objects, and coloring
backgrounds and foregrounds, amongst many other things.
The scope of the Drupal workshops does not include detailed CSS
instructions, but knowledge of a few aspects of the CSS Styles
Editor can help correct many formatting issues that may arise.
Let’s take a look at how CSS works with tables…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
41
Table Styling: Figuring Out Selections – Table Components
The first thing that needs to be done is a proper selection of the
desired table element – this can be a little tricky as a table has a
few different selectable components.
Content
Cell
Table
Click on the Edit tab to open your node in edit mode and
experiment with the different selection types.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
42
Table Styling: Figuring Out Selections – Table Components – Content
Selecting table content is the
simplest selection to perform:
1. For an image, just click on the
image to select it
1
2. For text, a standard selection
with your mouse works – just
hold down the left key on your
mouse at the starting point and
drag your mouse over the text
area you want to select
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
43
Table Styling: Figuring Out Selections – Table Components – Cell
Selecting a single cell is, perhaps, the
trickiest selection process:
1
1. Click into the white space of a
cell and hold down your left
mouse key, then drag your
mouse across the cell – you
may have to drag into an
adjoining cell
2. With the mouse key still held,
drag back into your desired cell
to snap the selection into place
2
Note: Clicking into a cell currently is
not possible using Internet Explorer.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
44
Table Styling: Figuring Out Selections – Table Components – Entire Table
Click your mouse in this space
between the dashed lines
1
And, finally, to select an entire table:
1. Click within the cell spacing area
- the space between the dashed
gridlines
2. The inner perimeter of each
individual cell and all cell
content will appear greyed out
2
Note: Selecting an entire table in this
manner is currently not possible using
Internet Explorer.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
45
Table Styling: Edit CSS Style Refresher – Opening the Dialog Box
1
2
With your table fully selected,
open the CSS Edit Style dialog box:
1. Click on the Edit CSS Style
tool button
2. Within the Edit CSS Style
dialog box, click on the Box
tab
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
46
Table Styling: Edit CSS Style Refresher – Box Tab
Let’s examine the CSS Edit Styles Box
tab for a second:
1. Width field
– Sets width of selected “box”
1
3
2
4
5
2. Height field
– Sets height of selected “box”
6
3. Float field
– Allows for text to flow around object
4. Clear field
– Clears float so text stops flowing
5. Padding group
– Distance between text in a cell and the
cell wall
6. Margin group
– Distance between the outer border of
an object and other objects that may
be surrounding it
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
47
Table Styling: Ex. 10 Table Positioning – Floating a Table – Moving Table
Tables, like other embedded objects, can be
floated to the left or right so text flows
around. Let’s float this practice table. First
we’ll have to move it to a desired insertion
point:
1. Select the entire table
2. Grab the table by clicking and holding
down the left mouse key, and then
drag the table to the front of the first
line of text
2
1
Note: Some patience and practice may be
required here. Look for the flashing cursor at the
front of the insertion point
3
3. The table will “jump” up above the
text – this is normal as a float hasn’t
been applied yet
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
48
Table Styling: Ex. 10 Table Positioning – Floating a Table – Setting a Float
To float the table, do the following:
2
1. Re-select the entire table
1
3
2. Click the Edit CSS Style button
4
3. In the Edit CSS Style dialog box,
click on the Box tab
4. Select right from the Float
selection field
5
5. Click the Update button
When finished, click the Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
49
Table Styling: Ex. 10 Table Positioning – Floating a Table – Completed
The table should now float to the
right of your text.
It’s pretty crowded, though. This
means the margin needs to be
adjusted.
Click the Edit tab to get started…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
50
Table Styling: Ex. 10 Table Positioning – Adjust Margins
To adjust the margins, do the
following:
2
1. Select the entire table
2. Click the Edit CSS Style button
1
3
4
3. In the Edit CSS Style dialog
box, within the Margin group,
enter 10 pixels in the Top
fieldset
4. Click the Update button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
51
Table Styling: Ex. 10 Table Positioning – Adjust Image Sizes
Now resize the left and right images
so they are the same height as the
center image:
1. Click on the leftmost image in
the table
2. Click the Insert/Edit Image
button
3. In the Insert/Edit Image dialog
box, click the Appearance tab
4. In the Dimensions group,
change the height field to 116
(this is the right side field)
5. Click the Update button
2
3
4
1
5
Repeat this process on the rightmost
image in the table – leave the center
image as is.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
52
Table Styling: Ex. 10 Table Positioning – Adjust Caption Sizes
With the image resizing, the
captions now look rather big –
let’s resize those as well:
1. Select the leftmost caption
2. Click the Edit CSS Style
button
3. In the Edit CSS Style dialog
box Text tab, select x-small
from the Size field
4. Click the Apply button
2
3
1
5
Apply this format to other two
captions as well before updating
4
5. Click the Update button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
53
Table Styling: Ex. 10 Table Positioning – Merge Cells
2
Now let’s merge those bottom
cells so we can add another
image:
1. Select the bottom three
cells
2. Click the Merge table cells
button
The cells will all join together
into one wide cell.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
1
54
Table Styling: Ex. 10 Table Positioning – Upload & Add Another Image
Now upload and insert a new image:
1. Position the cursor in the bottom cell
2. Click the Insert/edit image button
3. Click the Browse button and upload
the ex-10.png image
4. After returning to the Insert/edit
image dialog box, enter an
description in the Image description
field
5. Enter a title in the Title field
6. Click the Appearance tab
7. Set the Vertical space field to 0
8. Set the Horizontal space field to 0
9. Click the Insert button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
55
Table Styling: Ex. 10 Table Positioning – Completed
Now that the positioning and
extra image is added, things are
starting to come together with
this little table.
Some extra style work is order,
though. Let’s use CSS to change
the gridlines.
Click your Edit tab to begin…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
56
Table Styling: Ex. 11 Add/Remove Gridlines – Remove Inner & Outer Borders
Gridlines are difficult to work with
due to the granularity in which you
can affect each line in each cell. To
adjust gridlines, do the following:
1. Select the top left cell
2. Click the Edit CSS Style button
3. In the Edit CSS Style dialog
box, click the Border tab
4. In the Style field for the Top
gridline, select none,
2
4
Note that every Same for all
checkbox is filled – leave this as is
6
5. Click the Apply button, and
then apply this format to the
other top cells
6. Click the Update button when
finished
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
1
57
5
Table Styling: Ex. 11 Add/Remove Gridlines – Add Outer Border Only
2
3
1
6
4
5
8
7
Now, let’s just apply an outer
border:
1. Select the entire table
2. Click the Edit CSS Style button
3. In the Edit CSS Style dialog box,
click the Border tab
4. Top gridline Style field = solid
5. Top gridline Width field = thin
6. Top gridline Color field = click
Color picker button
7. Choose a color and click the
apply button on the Color dialog
box
Color #393939 is used in the example
8. Click the Update button on the
Edit CSS Style dialog box
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
58
Table Styling: Ex. 11 Add/Remove Gridlines – Change Outline Border Style – Preview
Click the Preview button to take a look at the result to date. The
table should now appear a little less congested in the middle, but
still be clearly defined by the outer border.
Scroll back down to your editor and let’s try a different border
style out.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
59
Table Styling: Ex. 11 Add/Remove Gridlines – Change Outline Border Style
To change the border style, just do the
following:
1. Select the entire table
2. Click the Edit CSS Style button
3. In the Edit CSS Style dialog box,
click the Border tab
4. Top gridline Style field = groove
5. Top gridline Width field = medium
6. Click the Update button on the
Edit CSS Style dialog box
Click the Save button when finished.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
3
1
4
6
60
5
Table Styling: Ex. 11 Add/Remove Gridlines – Completed
A “grooved” border effect should now
show.
Let’s put a little character into the
table by adding some background
color to the cells.
Click the Edit tab to begin.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
61
Table Styling: Ex. 12 Add Background Color
To add a background color, do the
following:
1. Select the leftmost cell
2
3
2. Click the Edit CSS Style button
3. Click the Background tab
4. Click the Color Picker to select a
color
4
1
Or you can just enter the hexadecimal
value used in the example: #F85911
6
5. Click the Apply button
5
Apply this same color to the other two
top cells
6. Click the Update button
Click the Save button when finished.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
62
Table Styling: Ex. 12 Add Background Color - Completed
The table is starting to look a little
more interesting now.
To finish it off, some margins
should be applied to tighten it up
just a bit more.
To begin, click the Edit tab.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
63
Table Styling: Ex. 13 Cell Content Margin Adjustment – Top Images
Margins can be tricky. In terms of positioning items on a web page, margins can be
associated with different objects all on the same page. We’re going to apply a negative
margin to our images to get the cell walls to contract just a bit. To adjust the image
margins, do the following:
1. Select the leftmost top image
2. Click the Edit CSS Style button
3. On the Edit CSS Style dialog box,
click the Box tab
4. In the Margin group, Top
fieldset, enter -2 pixels
5. Click the Apply button
2
3
1
6
Apply this same format to the other
two images
5
6. Click the Update button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
4
64
Table Styling: Ex. 13 Cell Content Margin Adjustment – Bottom Image
2
3
4
5
1
6
The bottom image doesn’t have a
caption so the space between the
image and cell walls appears larger.
To set the margin on the bottom
image do the following:
1. Select the bottom image
2. Click the Edit CSS Style button
3. On the Edit CSS Style dialog box,
click the Box tab
4. In the Margin group uncheck the
Same for all checkbox
5. In the Margin group, Top and
Bottom fieldsets, enter -12 pixels
6. Click the Update button
When finished, click the Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
65
Table Styling: Ex. 13 Cell Content Margin Adjustment – Completed
The final result shows a table
that has been compacted slightly,
putting it more in line with the
bottom of the text.
While we’re done with this
particular table, we’re not quite
through with the page yet.
There are some even more
interesting things we can do with
tables and layout.
Click the Edit tab to begin.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
66
Video Player Layout: Overview
Everything that you can do with image embeds can also be done
with the video player used by OSU Media Manager.
This includes things such as resizing the player, embedding the
player inside of a table cell, and floating the player so that text
wraps nicely around it.
If your organization is currently using OSU Media Manager to
display and distribute your videos, you can easily embed a few of
your favorites in a table to show them off to your audience.
This can make for an attractive, and more engaging, landing page
for your organization.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
67
Video Player Layout: Ex. 14 Advanced Table Layout – Paste in Text
1
To get started, let’s add some additional text
to our existing page:
1. Open up the ex-14a.doc file from your
lab materials and copy the text from
the file
2. Return to your Drupal page and paste
the text into your page, beneath the
original text
When finished, click the Save button.
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
68
Video Player Layout: Ex. 14 Advanced Table Layout – Completed Paste
The pasted text should seamlessly integrate
with your existing text.
Notice that the first line of your new text
wraps around your original table as well –
the float property is persistent.
Now, let’s add another table and float it to
the left.
Click your Edit tab to begin.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
69
Video Player Layout: Ex. 14 Advanced Table Layout – Insert Table
Now insert a table:
1. Insert your cursor directly
before the line “And by the
way…”
2
3
2. Click on the Inserts a new
table button
3. On the General tab, enter the
following settings:
Columns = 2
Rows = 2
4
Cellpadding = 2 Cellspacing = 2
Align = Left
Border = 0
1
Insert cursor here
Width= 70%
4. Click the Insert button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
70
Video Player Layout: Ex. 14 Advanced Table Layout – Set Float & Margin
After inserting the table, apply a
float and margin adjustment to it:
1. Select the entire table
2
2. Click the Edit CSS Style button
3
3. Click the Box tab
4
1
4. In the Float field select left
5
6
5. In the Margin group, uncheck
the Same for all box
6. In the Margin group, Right
field enter 10 pixels
7
7. Click the Update button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
71
Video Player Layout: Ex. 14 Advanced Table Layout – Merge Top Row
2
Now merge the top row:
1. Select both cells in the top row
1
2. Click the Merge table cells
button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
72
Video Player Layout: Ex. 14 Advanced Table Layout – Insert Top Video Player
2
1
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
Insert a video player in the top row by doing
the following:
1. Click your cursor into the top cell
2. Click the Insert/edit embedded media
button
3. When the Insert/edit embedded media
dialog box opens, click the filmstrip
icon, which will open a connection to
OSU Media Manager
73
Video Player Layout: Ex. 14 Advanced Table Layout – Insert Top Video Player
Select a video from the provided
collection by clicking on it:
1. The video link will be
automatically entered in your
Insert/edit embedded media
dialog box:
2. Click the Constrain proportions
check box
1
2
3
3. In the leftmost Dimensions box
(width) enter 360
4. Click the Insert button
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
74
Video Player Layout: Ex. 14 Advanced Table Layout – Now You Do It – Insert Bottom Players
Using the information below, embed two additional video players
into your table.
Bottom Left Cell
Click Insert/edit embedded media
button
In Insert/edit embedded media dialog
box, click Filmstrip icon
Select a video by clicking on it
Click Constrain proportions checkbox
Change left (width) dimension to 225
Click Insert button
Repeat this process with a different
video in the bottom right cell
When finished, click the Save button.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
75
Video Player Layout: Ex. 14 Advanced Table Layout – Completed Player Insertion
The new table and its video player contents
should now float nicely to the left of the
page.
Items within a cell can also be floated – so,
for example, if a descriptive paragraph were
to be added to the top cell, the player can
be specified to float next to it.
Let’s give this a try. Click the Edit tab to
begin.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
76
Video Player Layout: Ex. 14 Advanced Table Layout – Add Text
1
To add text within an occupied cell, do
the following:
1. From your lab materials, copy the
text in file ex-14b.doc
2. Paste the text into your top cell,
to the left side of your video
player – it will not behave well yet
because the player isn’t floated
2
3
3. Grab the player with your mouse
and drag just before the first line
of your text addition, if necessary
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
77
Video Player Layout: Ex. 14 Advanced Table Layout – Set Top Player Float and Margin
Now, set a float and margin on the
player:
1. Click on the top player
2
2. Click the Edit CSS Style button
3. Click the Box tab in the Edit CSS
Style dialog box
4. In the Float field, select right
3
4
1
5
6
7
5. In the Margin group, uncheck the
Same for all box
6. In the Margin group, Left field
enter 5 pixels
7. Click the Update button
Click the Save button when finished
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
78
Video Player Layout: Ex. 14 Advanced Table Layout – Completed To Date
The additional text should fit nicely to the left of the
top player.
Now let’s add some caption text to the smaller bottom
players
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
79
Video Player Layout: Ex. 14 Advanced Table Layout – Add Bottom Player Captions
Note the offset
vs. the other cell
We’ll use a different method to add
captions this time:
1. Insert your cursor to the right of
the leftmost bottom video player
and hit your Enter key
2. Enter a caption of your choosing
in the new line
3. Repeat this process on the right
side player
You may note some odd positioning. This
is typically due to elements that are
automatically or accidentally entered,
such as a space character, etc. If this
occurs, just position your cursor directly
to the right of the player and hit your
delete key to clear it out
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
80
Video Player Layout: Ex. 14 Advanced Table Layout – Center Bottom Row Elements
2
Now center the contents of both
cells:
1. Select a cell
1
2. Click the Align center button
The contents of both cells will center
align at the same time.
Click the Preview button when
completed
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
81
Video Player Layout: Ex. 14 Advanced Table Layout – Preview
The preview shows a table that is coming
along nicely.
Now we’re going to add some style
elements to it: a border to match the upper
table, a background fill, and some text
styling.
We’re also going to pick up the pace.
Scroll down the page to begin…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
82
Video Player Layout: Ex. 14 Advanced Table Layout – Remove Gridlines
First, let’s get rid of the gridlines
– remember, this process has to
be done cell-by-cell:
2
1. Select the top cell only
2. Click the Edit CSS Style
button
3
1
4
3. Click the Border tab
4. In the Style group, Top
field, select none
5. Click the Apply button
6
5
Apply this format to the other
two cells as well
6. Click the Update button
after all cells have been
formattted
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
83
Video Player Layout: Ex. 14 Advanced Table Layout – Add Grooved, Outer Border
Now add the grooved, outer border:
1. Select the entire table
2. Click the Edit CSS Style button
2
3
1
4
5
3. Click the Border tab
4. In the Style group, Top field, select
groove
5. In the Width group, Top field,
select medium
6. In the Color group, Top field, select
a color
6
7
Color #393939 is used in the example
7. Click the Update button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
84
Video Player Layout: Ex. 14 Advanced Table Layout – Change Background Color
Now, add a background color –
remember, this has to be done cellby-cell:
1. Select the top cell
2
3
4
1
2. Click the Edit CSS Style button
3. In the Edit CSS Style dialog box,
click the Background tab
4. Select a background color
6
5
Color #393939 is used in the example
5. Click the Apply button
Apply the format to the remaining two
cells
6. Click the Update button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
85
Video Player Layout: Ex. 14 Advanced Table Layout – Change Text Appearance
2
1
3
4
5
Finally, let’s change the text appearance,
we’ll make it smaller, bolder, and white –
note, the text will have to be changed in
segments:
1. Highlight the first paragraph in the
top cell
2. Click the Edit CSS Style button
3. In the Size field, enter 10 pixels
4. In the Weight field, enter bolder
5. In the Color field, enter #ffffff
6. Click the Update button
Repeat this process with all other text
inside the table
6
If no issues are encountered, click the
Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
86
Video Player Layout: Ex. 14 Advanced Table Layout – Troubleshooting Text Issues
Working with embedded images
and text in fairly tight areas can be
difficult. Often times, during the
course of positioning, a deletion
may be made that affects the
underlying HTML structure.
If your paragraphs do not properly
save with the styles specified,
chances are a paragraph tag has
been deleted.
To check this out, click the HTML
button in your toolbar.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
87
Video Player Layout: Ex. 14 Advanced Table Layout – Completed
The final result is a nicely laid out page with
a variety of different, eye-catching elements.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
88
Summary
There has been quite a bit of ground covered today concerning
both data table and layout table development. The various topics
covered include:
• Table Operations
• Row and Cell Properties
• Table Style Properties
• Image Attributes
• OSU Media Manager Video Player Attributes
While the basics are covered in class, it requires quite a bit of
practice to become efficient at putting a more complex table
design together. It also takes a bit of experience to be able to
quickly troubleshoot display issues that may occur.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
89
Conclusion
This completes the OSU Drupal 6 Designing Tables tutorial. For
additional tutorials, please visit CWS Training at:
http://oregonstate.edu/cws/training
To view and register for all OSU Drupal 6 Workshops, visit the
Professional Development Central Registration site at:
http://oregonstate.edu/cws/register
To submit a Help Ticket or make a Site Request on-line, go to:
http://oregonstate.edu/cws/contact
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
90