itextsharp pdf c# : Creating bookmarks in pdf documents application software utility azure windows winforms visual studio Build%20Your%20Own%20Web%20Site%20The%20Right%20Way%20Using%20HTML%20&%20CSS%203rd%20Ed26-part783

are a couple of reasons for this. The first is that a table-based layout will
generally require much more markup to hold the page together—acting like
ascaffold, so to speak. Using a table-based layout, it’s more than a matter of
marking up sections of the page with div elements. This extra markup adds
to the page file size, and therefore, the amount of time it takes to download
the file.
The second reason relates to the user’s perception of download speed.
Browsers don’t download entire web pages in one go; when they ask for a
web page, they receive it as a trickle of information, and try to render that
information as it arrives. In the case of oursite, the browserwould renderthe
header, then the navigation, and finally the body content. If the trickle of in-
formation is so slow that there’s a pause halfway through the body content,
the browser is still able to display the first half of the body content without
anytrouble.It’s adifferentscenarioaltogetherwhen usingtable-based layouts.
Ina table-based layout, thebrowserneeds tohave downloaded allthecontent
in the table before it knows how to accuratelyrenderthat information on the
screen. As such, a CSS-based page layout will usually appear on the screen
faster than a table-based layout.
If there’s one point to remember from this chapter, it’s this: despite what anyone
tells you, using tables is fine. They should not be used for page layout (that’s
where they gain their bad reputation from), but it’s perfectly okay to use tables
for their originally intended purpose—the presentation of data in a grid.
Anatomy of a Table
Before we start adding the table to our Events page, let’s take a step back and look
at the example we saw in Table 6.1: the simple table of telephone contact details.
At a glance, we can identify some specific areas of the table, namely the headers,
rows, columns, and table data cells. Figure 6.2 explains this diagrammatically.
Although I mentioned columns, there’s no need to indicate these in the HTML. At
its most basic level, a table is put together using commands that tell the browser
where to start a new row, or a new cell within any given row; as the columns are a
natural by-product of this approach, it’s unnecessary to declare each new column.
Build Your Own Website The Right Way Using HTML & CSS
224
Creating bookmarks in pdf documents - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
adding bookmarks to a pdf; how to add bookmarks to a pdf
Creating bookmarks in pdf documents - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
create bookmarks in pdf; excel pdf bookmarks
Figure 6.2. The anatomy of a table
The areas marked in Figure 6.2 have the following direct equivalents in HTML:
table
1
contains the entire table
tr
2
contains an entire row of atable(hence table row)
th
3
signifies a table header cell
td
4
ageneral table data cell
Let’s see how the example table looks in HTML:
<table>
<tr>
<th>Name</th>
<th>Contact (Home)</th>
<th>Contact (Work)</th>
<th>Location</th>
</tr>
<tr>
<td>Jane Bradley</td>
<td>02380 123123</td>
<td>02380 577566</td>
<td>Southampton</td>
</tr>
<tr>
<td>Fred Bradley</td>
<td>01273 177166</td>
1
http://reference.sitepoint.com/html/table/
2
http://reference.sitepoint.com/html/tr/
3
http://reference.sitepoint.com/html/th/
4
http://reference.sitepoint.com/html/td/
225
Tables: Tools for Organizing Data
C# Create PDF Library SDK to convert PDF from other file formats
Gratis control for creating PDF from multiple image formats PDF with a blank page, bookmarks, links, signatures Load PDF from existing documents and image in
creating bookmarks pdf; creating bookmarks in a pdf document
VB.NET Create PDF Library SDK to convert PDF from other file
Gratis control for creating PDF from multiple image formats PDF with a blank page, bookmarks, links, signatures Load PDF from existing documents and image in
bookmarks in pdf files; how to bookmark a pdf file in acrobat
<td>01273 946376</td>
<td>Brighton</td>
</tr>
<tr>
<td>Lionel Rundel</td>
<td>01793 641207</td>
<td>01793 626696</td>
<td>Swindon</td>
</tr>
</table>
Can you see how the two marry up? The elements that make up a table can seem a
little daunting when you first encounter them, but like so many HTML elements,
their names are quite easy to remember.
Styling the Table
The
table
element is fairly simple: it’s the element that contains all the data that
makes up the table, though, as Figure 6.3 shows, it is quite ugly.
Figure 6.3. The uninspiring default appearance of a table
How can wejazzthis up? If you’rethinking CSS, giveyourself a pat ontheback—CSS
is definitely the way to go!
Borders, Spacing, and Alignment
Let’s start by putting some borders around these cells. Figure 6.4 shows the impact
of the following CSS code:
td {
border: 1px solid black;
}
Build Your Own Website The Right Way Using HTML & CSS
226
XDoc.Word for .NET, Advanced .NET Word Processing Features
Viewing, editing, converting, processing, creating, annotating and zooming & rotation; Outlines, bookmarks, & thumbnail Create Word from PDF; Create Word from
adding bookmarks to pdf document; bookmarks pdf
PDF Image Viewer| What is PDF
such as text extraction, hyperlinks, bookmarks and metadata as version among a suite of PDF-based standards to develop specifications for creating, viewing, and
bookmarks in pdf; adding bookmarks to pdf reader
Figure 6.4. One-pixel borders placed around each cell
Perhaps this isn’t quite what you expected. That space between each of the cell’s
borders is called cell spacing; it can beturned off by applying the
border-collapse:
collapse;
declaration to the
table
element.
Let’s turn off the cell spacing, and add a little more decoration to our table. We will
also set the table headingsto align to the left of the cell. By default,thecontent inside
table headings (
th
)is aligned to the center, which can be confusing (and almost al-
ways looks wrong when the other table cells are left-aligned). Figure 6.5 shows the
results of the suggested changes (and a few other enhancements too):
table {
border-collapse: collapse;
border: 1px solid black;
}
th {
text-align: left;
background: gray;
color: white;
padding: 0.2em;
}
td {
border: 1px solid black;
padding: 0.2em;
}
Figure 6.5. Style rules applied to the table
It’s looking a lot sharper now.
227
Tables: Tools for Organizing Data
How to C#: Basic SDK Concept of XDoc.PDF for .NET
annotation features can be integrated into your C# project, such as annotation creating, deleting, modifying This class describes bookmarks in a PDF document
create bookmarks in pdf reader; bookmarks pdf file
VB.NET PDF: Basic SDK Concept of XDoc.PDF
features can be integrated into your VB.NET project, such as annotation creating, deleting, modifying This class describes bookmarks in a PDF document.
add bookmarks to pdf; create bookmarks pdf files
class
-ifying Your Tables
Tables can be used for a variety of purposes, and each type of table may warrant a
different look. For this reason, it’s a good idea to use classes in your CSS selectors
for tables.
For example, imagine your site includes the following types of tables:
rates
schedule
events
You could set different style rules for each table type in your CSS:
table.rates {
/* declarations for rates tables */
}
table.schedule {
/* declarations for schedule tables */
}
table.events {
/* declarations for events tables */
}
Then, when you added a
table
to your HTML, all you’d need to do is give it the
appropriate
class
attribute:
<table class="rates">
Alittle forethought goes a long way!
Making Your Tables Accessible
Iintroduced the idea of web accessibility in the section called “Web Accessibility”
in Chapter 5 to emphasize the importance of the
img
element’s
alt
attribute. It’s
vital to consider accessibility when it comes to tables, too. The question that all
web designers ask themselves at some point in their careers is, “How on earth does
ascreen reader read out a table?”
Build Your Own Website The Right Way Using HTML & CSS
228
How to C#: Basic SDK Concept of XDoc.PowerPoint
Conversely, conversion from PDF to PowerPoint (.PPTX C# project, such as annotation creating, deleting, modifying This class describes bookmarks in a PowerPoint
export pdf bookmarks; editing bookmarks in pdf
How to C#: Basic SDK Concept of XDoc.Word
Conversely, conversion from PDF to Word (.docx) is C# project, such as annotation creating, deleting, modifying This class describes bookmarks in a Word document
acrobat split pdf bookmark; copy pdf bookmarks
Linearization
In readingout the content of a table, ascreen reader linearizes that content. Linear-
ization simply means that the screen reader reads the content in theorder in which
it appears in the table’s markup. As an example, consider Table6.2, which displays
TV listings. Visually, it’s easy to associate a time slot with the associated program.
Table 6.2. An example of TV listings set out in a table
11:00 p.m.–11:45 p.m.
10:00 p.m.–11:00 p.m.
9:30 p.m.–10:00 p.m.
Mad Men
Glee
Regional News
We can quickly and easily see when each program starts and ends. Let’s take a look
at the markup:
<table>
<tr>
<td>9:30 p.m.-10:00 p.m.</td>
<td>10:00 p.m.-11:00 p.m.</td>
<td>11:00 p.m.-11:45 p.m.</td>
</tr>
<tr>
<td>Regional News</td>
<td>Glee</td>
<td>Mad Men</td>
</tr>
</table>
The linearized interpretation of this would be: “9:30 p.m.–10:00 p.m., 10:00 p.m.
–11:00 p.m.,11:00 p.m.–11:45 p.m.,Regional News, Glee,Mad Men.” That’srelatively
incomprehensible as far as content goes! We could fix this problem by changing
the orientation of the table; that is, making the program names run down the left
column and the time slots run down the right. Or we could mark up the cells that
contain the names of the programs using
th
instead of
td
,and adding a
scope
5
at-
tribute to each of the
th
elements. We’ll look into this second solution later in the
chapter, when we discuss some advanced table concepts.
5
http://reference.sitepoint.com/html/th/scope/
229
Tables: Tools for Organizing Data
How to C#: Basic SDK Concept of XDoc.Excel
Conversely, conversion from PDF to Excel (.XLSX) is also C# project, such as annotation creating, deleting, modifying This class describes bookmarks in a Excel
bookmark template pdf; how to bookmark a pdf in reader
summary
No, I’m not about to summarize what we’ve just discussed in this chapter just yet!
Instead, I’m going to introduce the table’s
summary
6
attribute. This is an invisible
attribute—it won’t render on the screen or, for that matter, when you print the web
page—that can be used to provide extra information about the table to assistive
devices. Here’s an example of a
summary
:
<table summary="Area representatives, and their home and work
telephone numbers">
When you add a summary, be brief but descriptive. This attribute should be used
likethe
alt
attribute is for images: be brief, but not to the point of invitingquestions.
Captioning Your Table
If you think the
summary
attribute seems like a bit of a wasted opportunity because
it’s hidden from the table’sonscreen display, don’t worry. You can use the
caption
7
element for thispurpose. The
caption
element is contained insidethe
table
element.
You can use CSS to style it, too, just as you can style headings. Here’s how the
markup looks:
<table summary="Area representatives, and their home and work
telephone numbers">
<caption>Contact details</caption>
<tr>
<th>Name</th>
<th>Contact (Home)</th>
<th>Contact (Work)</th>
<th>Location</th>
</tr>
One note of caution: while
caption
is the proper way of providing a table heading,
it can be tricky to style with CSS consistently across all browsers. This may only
pose a small problem—after all, it’s fine if there’s some difference in rendering
across web browsers. That said, some designs sit poorly with the
caption
element,
so the developer might choose, instead, to omit it entirely and use a heading, for
6
http://reference.sitepoint.com/html/table/summary/
7
http://reference.sitepoint.com/html/caption/
Build Your Own Website The Right Way Using HTML & CSS
230
examplean
h2
or
h3
.Thisis still acceptable—proper headingsgive thepagestructure,
help search engines understand the nature of the page, and aid accessibility. But if
you can use
caption
and style it as you choose, it’s the better option to go with.
So far, we’ve looked at some of the basics of tables, and discussed some examples
that demonstrate the key concepts. I’veshown you how to use CSS to style the table
content, and how to make the table content accessible, but it’s best to see this in
practice. Let’s move along to our project site and see how wecan apply some of this
knowledge.
Adding an Events Table
You’ve learned about the various elements that make up a table. Now, you’re going
to build one of your own:
1.Open up
events.html
in your text editor.
2.Type the following code beneath the paragraph you added earlier:
chapter6/website_files/02_events_table/events.html
(excerpt)
<table class="events" summary="Details of upcoming club events and
dive trips">
<caption>Club events/dive trips for the next six
months</caption>
<tr>
<th>Date</th>
<th>Event Description</th>
<th>Approximate Cost</th>
<th>Contact</th>
</tr>
<tr>
<td>12 July</td>
<td>Committee meeting, deciding on next year's trips</td>
<td>N/A</td>
<td>Bob Dobalina</td>
</tr>
<tr>
<td>19 July</td>
<td>7-day trip to Hurghada (package deal) - limited
spaces</td>
<td>&pound;260 pp (all inclusive), departing Luton</td>
<td>Bob Dobalina</td>
</tr>
231
Tables: Tools for Organizing Data
<tr>
<td>5 August</td>
<td>Ocean &amp; Sports Diver Theory Course</td>
<td>Call for details</td>
<td>Jeff Edgely</td>
</tr>
<tr>
<td>12 August</td>
<td>Murder Mystery Weekend, Cotswolds (no diving!)</td>
<td>&pound;65 pp (accommodation included)</td>
<td>Jill Smith</td>
</tr>
</table>
Remember that you don’t have to type this out yourself—you can grab the markup
from the code archive instead.
All the features that we’ve covered in the chapter arepresent here:thetable
summary
attribute, the
caption
element,tableheaders(
th
), and the basicitems of construction
that you need for every table—the
table
,
tr
,and
td
elements. But, never mind the
markup, how does it look in the browser? Figure 6.6 reveals all.
In my mind, this display can be summed up in one word: yuck! Like the unstyled
tablewe saw earlier, this is very unattractive, and not easy to interpret. Fortunately,
it’s CSS to the rescue once again. Our first task should be to make our table more
legible and add some borders to it.
Build Your Own Website The Right Way Using HTML & CSS
232
Figure 6.6. The basic, unstyled table
Open
style1.css
and add a new rule for the
th
and
td
elements. Here’s the CSS you
need:
chapter6/website_files/03_events_table_borders/style1.css
(excerpt)
table.events {
border-collapse: collapse;
}
table.events th, table.events td {
padding: 4px;
border: 1px solid #000066;
}
table.events th {
font-size: x-small;
}
table.events td {
font-size: small;
}
233
Tables: Tools for Organizing Data
Documents you may be interested
Documents you may be interested