User:Stais/Sandbox/Tables: Cells, Rows, Placement, Sorting, Scrolling

Tables: Cells, Rows, Placement, Sorting, Scrolling

Wiki Intermediate Lesson 5: Tables - Cells / Padding / Separation / Eliminate border spacing

Exercises:

With our above table place a black border, "dotted" style and 5 pixels thick. Make the table 600 pixels wide. Next place a blue border around all the cells. Place 5 pixels of padding in the header row of cells Separate all the cells with 5 pixels. Place a lightblue background on the column headers.

Wiki Intermediate Lesson 6: Tables - Rows

Exercises: With our above table place a yellow border, "groove" style and 10 pixels thick. Make the table 700 pixels wide. Next place a blue border around the headers. Give the header cells a light blue background. Change the color of the font to white.

Wiki Intermediate Lesson 7: Tables - Placement

Text wrapping - left side of table - to move it to the right, you need float:right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Text Wrapping - right side of table

What if we want the text to wrap around on the right side of the table?

We then use float:left. Even though the table is defaulted to the left, this float:left will cause the text to wrap around on the right side of the tab

The text is up against the border, so we need to add a margin-right: 10px which will create a space between the border and text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Tables in the middle

Use the margin:auto attribute to get the table in the middle of the page with equal spacing on either side The text does not wrap around the table on this attribute and there is no space between the text and the bottom of the table.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

No wrapping

What if you don't want the text to wrap around your table regardless where you place it?

 NOTICE The default is for paragraphs to NOT wrap around a table. You would use this code when you have multiple paragraphs; the first paragraph you want to wrap around the table but the second you don't want to wrap around the table.
 * Enclose the text in either a paragraph or div tag.
 * Then install this attribute in the opening paragraph or div tag:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Exercises:

Place our demonstration table on the right side of the page.

Place our lorem ipsum paragraph under the table.

Place a 10 pixel space between the table and the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Wiki Intermediate Lesson 8: Tables - Sorting

Table sorting

You place the "class" before the inline style code. The class has to have a space to separate it from inline style codes.

Exercises:

Wiki Intermediate Lesson 9: Tables - Scrolling

Horizontal scroll bars

The table expanse is way beyond the right edge of the page (width is 2000px) First step is to encase the table between opening and closing div tags: Next we add the overflow:scroll" attribute to the beginning div tag.

Vertical scroll bars

To add a vertical scroll bar for very tall tables, just add the height attribute to the beginning div tag: see above

When you play around in your sandbox and if the height listed on the overflow line for the vertical scroll is higher than the table itself, your vertical scroll bar will not work.

Exercises:

Take our demonstration table and make it 900 pixels wide and tall. Then make the table scrollable both horizontally and vertically with a finish width and height of 400 pixels.