pdf annotation in c# : Add links to pdf online Library control component asp.net web page winforms mvc 03219189322-part1692

45
TABLES
04 
Ta b l e s
Add links to pdf online - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
change link in pdf file; pdf hyperlink
Add links to pdf online - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
clickable pdf links; pdf edit hyperlink
46
FOUNDATIONS OF WEB DESIGN
ChapTer Code
The code examples for This chapTer 
can be downloaded from The websiTe 
(hTTp://foundaTionsofwebdesign.com).
What are HTML tables used for? Think 
of  spreadsheets  or  data  you  want  to 
organize and present. Maybe you have 
statistics, a schedule, or a project you 
need  to organize. Let’s  see  how each 
element is used.
Ta ble elemenT
The 
table
element allows you to arrange 
and present data in rows and columns of 
cells.  However, it can’t do much without its 
supporting cast: the 
tr
(table row), 
td
(table 
data cell), and 
th
(table header) elements. 
So,  let’s  start  out  by  using  these  basic 
elements with some common attributes.
sTep 4.1.1
Open the table.html document  in the 
fowd_ch04_folder  and  enter  a  table 
element inside the 
div
element.
<div class="container">
<table>
</table>
</div> <!-- end .container -->
Table headings
The 
th
element holds the heading of each 
column.  Let’s  say  you’re  developing 
 reading  list  of  your  favorite  books 
and you want columns for the authors, 
for the book titles, and for indicating if 
you’ve read each book. 
sTep 4.1.2
Add the three 
th
elements with the 
column topics within the 
<table>
tags.
<table>
<th>Author(s)</th>
<th>Book Title</th>
<th>Read?</th>
</table>
Save your document and view the result 
in the browser (Figure 4.1).
C# PDF Convert to HTML SDK: Convert PDF to html files in C#.net
HTML converter toolkit SDK, preserves all the original anchors, links, bookmarks and to Use C#.NET Demo Code to Convert PDF Document to Add necessary references
pdf link to specific page; add hyperlink to pdf in preview
.NET PDF Document Viewing, Annotation, Conversion & Processing
Edit, delete text from PDF. Insert images into PDF. Edit, remove images from PDF. Add, edit, delete links. Form Process. Fill in form data programmatically.
adding links to pdf; add a link to a pdf file
47
TABLES
Years Past
Did you know that web designers 
used to design layouts using table 
elements!  Well,  it’s  not  so  crazy 
considering that tables were one 
way—before  there was  adequate 
CSS support—to make sure your 
layout  looked  the  same  from 
browser  to  browser.  However,  in 
modern web design, page layout 
is not the purpose of tables.
Figure 4.1
Table headers are bold by default.
Table rows
The 
tr
element defines the rows of your 
table. While the three 
th
elements already 
display as a “row,” the 
tr
element gives 
structure and meaning to a row—and a 
table can have lots of rows.
<table>
<tr>
<th>Author(s)</th>
<th>Book Title</th>
<th>Read?</th>
</tr>
</table>
The next row will add data about one of 
your favorite books. The data for each 
book will be contained in a row, between 
a set of
<tr> </tr>
tags. The first book 
is John Steinbeck’s The Grapes of Wrath,  
which you will affirm you’ve read.
<table>
<tr>
<th>Author(s)</th>
<th>Book Title</th>
<th>Read?</th>
</tr>
<tr>
John Steinbeck
The Grapes of Wrath
Yes
</tr>
</table>
When you view this site, notice that the 
data is above (not below) each heading 
and not within the borders of your table 
(Figure 4.2).
Figure 4.2
Unstructured table row.
In  order to get the data in  the  correct 
spot,  you  need  to  add  another  set  of 
tags around each piece of data using the 
td
element.
VB.NET PDF Convert to HTML SDK: Convert PDF to html files in vb.
Turn PDF images to HTML images in VB.NET. Embed PDF hyperlinks to HTML links in VB.NET. Convert PDF to HTML in VB.NET Demo Code. Add necessary references:
pdf hyperlinks; add links to pdf acrobat
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
the original text style (including font, size, color, links and boldness). C#.NET DLLs and Demo Code: Convert PDF to Word Document in C# Add necessary references
change link in pdf; pdf link to attached file
48
FOUNDATIONS OF WEB DESIGN
Table daTa Cell
The 
td
element defines the cells of your 
table and contains your data. 
sTep 4.1.3 
In  the  example,  the book’s  name, the 
author’s  name, and your  “yes” or “no” 
(whether or  not you’ve read  the book) 
are your data. Each item of data needs 
to be within a 
td
element.
<table>
<tr>
<th>Author(s)</th>
<th>Book Title</th>
<th>Read?</th>
</tr>
<tr>
<td>John Steinbeck</td>
<td>The Grapes of Wrath</td>
<td>Yes</td>
</tr>
</table>
Now each cell of data is below the 
header it matches (Figure 4.3).
Figure 4.3
Structured table data.
Table border
In order to see your table a little more 
easily,  you’re  going  to  add  a  border 
around it. Although we’ve not discussed 
CSS  (Cascading  Style  Sheets),  this 
method is best for displaying borders.
sTep 4.1.4
Add styles, within the 
<style></style>
tags 
located in the 
head
element, to show the 
border for the 
table
th
, and 
td
elements 
within your HTML document (Figure 4.4).
<head>
<meta charset="utf-8">
<title>Table Demo</title>
 <style>
table, th, td{
border: 1px solid #333;
}
</style>
</head>
Figure 4.4
Your CSS styles create a border around your 
table and data cells.
C# Create PDF Library SDK to convert PDF from other file formats
PDF with a blank page, bookmarks, links, signatures, etc. PDF document in C#.NET using this PDF document creating toolkit, if you need to add some text
adding links to pdf document; pdf links
C# Image: Tutorial for Document Management Using C#.NET Imaging
more detailed C# tutorials on each part by following the links respectively are dedicated to provide powerful & profession imaging controls, PDF document, image
clickable links in pdf from word; accessible links in pdf
49
TABLES
adding stYles
While  it’s  good  practice  to  keep 
your  content  (HTML)  separate 
from your design (CSS), the style 
element allows you to add CSS to 
your HTML document. It must be 
contained within the 
head
element.
We’ll get more in-depth into CSS 
in Chapter 5.
Bad HtMl
In the past, the border for a table 
and its data was displayed using the 
(now) deprecated border attribute.
<table border="1">
Deprecated  HTML  tags  and 
attributes  are  those  that  have 
been (or will soon be) removed 
from the HTML  specification. It 
is  recommended  that  you  not 
use  these  HTML  tags  because 
they may become obsolete.
For  a  list  of  deprecated  HTML 
elements  and  attributes,  view 
http://webdesign.about.com/od/
htmltags/a/bltags_deprctag.htm.
order headers and daTa
Each 
td
has to be ordered according to 
the 
th
. So your first 
td
element should 
relate to the first 
th
element, the second 
td
element  relates  to  the  second 
th
element, and so on (Figure 4.5).
Figure 4.5    Illustration of an ordered 
layout for table headers and table data.
VB.NET PDF: Basic SDK Concept of XDoc.PDF
You may add PDF document protection functionality into your VB.NET program. to edit hyperlink of PDF document, including editing PDF url links and quick
adding hyperlinks to pdf; adding a link to a pdf in preview
How to C#: Basic SDK Concept of XDoc.PDF for .NET
You may add PDF document protection functionality into your C# program. to edit hyperlink of PDF document, including editing PDF url links and quick
add email link to pdf; add hyperlinks to pdf
50
FOUNDATIONS OF WEB DESIGN
<table>
<caption>My Reading List</caption>
<thead>
<tr>
<th>Author(s)</th>
<th>Book Title</th>
<th>Read?</th>
</tr>
</thead>
...
</table>
Table CapTion
The 
caption
element gives an overall title to the table. In this case, maybe you’d call it “My 
Reading List”—it’s actually a list of books that I have either read or want to read. 
sTep 4.1.5 
The 
caption
element for the table comes 
right after the opening 
<table>
tag. Go 
ahead and add it to your code.
<table>
<caption>My Reading List</caption>
<tr>
<th>Author(s)</th>
<th>Book Title</th>
<th>Read?</th>
</tr>
<tr>
<td>John Steinbeck</td>
<td>The Grapes of Wrath</td>
<td>Yes</td>
</tr>
</table> 
Notice the text for the caption is placed 
above the table headers, but outside of 
the border (Figure 4.6).
Figure 4.6
The caption is added to the top of the 
table, but not within the border.
Table header
The 
thead
element helps to group your 
table header (
th
) cells. 
sTep 4.1.6
In this table, the header row is where the 
th
elements are: “Book Title,” “Author(s),” 
and  “Read?”  Simply  add  the  opening 
<thead>
tag  before  the  opening 
<tr>
tag  and  add  the  closing 
</thead>
tag 
immediately after the closing 
</tr>
tag 
for that row.
51
TABLES
Table body
The 
tbody
element groups the body—the 
set of rows where the content resides—
of the table. 
sTep 4.1.7 
Place the 
tbody
tags around the book list.
<table>
<caption>My Reading List</caption>
<thead>
<tr>
<th>Author(s)</th>
<th>Book Title</th>
<th>Read?</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Steinbeck</td>
<td>The Grapes of Wrath</td>
<td>Yes</td>
</tr>
<!-- additional table rows and data 
are stored in the tbody element -->
</tbody>
</table>
MultiPle Bodies
It  is  possible  to  have  more  than 
one 
tbody
inside  a 
table
. This  is 
covered with the 
rowspan
attribute 
in the bonus material for this chapter 
you can download on the website.
Table FooTer
The 
tfoot
element groups the summary 
(footer) area of the table. The summary 
of  a  table  could  show  the  copyright 
information for the data, give credit to who 
has created (or edited) the  list,  provide 
totals of column values, or indicate when 
the table was last updated.
sTep 4.1.8
After the closing of the 
</tbody>
tag, add 
the 
<tfoot></tfoot>
tags.  Within  the 
tfoot
element, add a 
tr
element and 
td
element with the data 
Updated March  5, 
2013
Note:  The  following  example  for 
placing tfoot apply only To The modern 
hTml5  documenT.  however,  There  are 
sTill many hTml4 and xhTml documenTs 
in use, so if ThaT’s your siTuaTion, see The 
aside on page 52.
<table>
<caption>My Reading List</caption>
<thead>
<tr>
...
</tr>
</thead>
<tbody>
<tr>
...
</tr>
<!-- additional table rows and data are 
stored in the tbody element -->
</tbody>
<tfoot>
<tr>
<td>Updated March 5, 2013</td>
</tr>
</tfoot>
</table>
Now you’ll view your document with the 
addition of your new elements (Figure 4.7).
52
FOUNDATIONS OF WEB DESIGN
spanning Columns
The 
colspan
attribute allows you to expand 
a data cell to span multiple columns in the 
table. So, in the example, you have the 
thead
that consists of one row with three 
columns of data (Figure 4.8).
And, in the 
tbody
, you currently have one 
row with three 
td
elements (Figure 4.9).
However, the 
tfoot
element has one row 
(
tr
element)  and  only  one 
td
element 
(Figure 4.10). 
sTep 4.1.9 
You  can  tell  that 
td
element  to  span 
multiple columns by adding the attribute 
colspan
(short  for  “column  span”)  and 
assigning a value (in this case, you want 
it to expand to three columns wide).
<tfoot>
<tr>
<td colspan="3">
Updated March 5, 2013
</td>
</tr>
</tfoot>
The result gives you a 
tfoot
element that 
spans all three columns (Figure 4.11).
Figure 4.7
The data in the 
tfoot
now displays 
at the bottom of the table layout.
Meaningful MarkuP  
But no stYle
While the 
thead
tbody
, and 
tfoot
elements will not change the look 
of your table, they will add some 
meaning (semantics) and provide 
hooks to style your table. Although 
these  elements  are  not  required, 
I’d recommend their use, as there 
are  additional  benefits  that  go 
beyond the scope of this book.
footer PlaceMent for 
HtMl4 and XHtMl
If  you’re  going  to  be  developing 
(or updating) a website that has a 
DOCTYPE  for  HTML4 or  XHTML 
Strict (plenty of websites still use 
them),  you’ll  need  to  place  the 
tfoot
after the
thead
and before 
the
tbody
element.
<table>
<caption></caption>
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
</table>
53
TABLES
Figure 4.8
Your table heading has three columns.
Figure 4.9
Your table body has three columns of data.
Figure 4.10
Your table footer has only one column of data.
Figure 4.11
Your footer now spans all three columns of 
your table.
Wrapping Things Up
You now have the basic foundation 
of how  to structure your data with 
the  table  element  and  the  basic 
supporting  cast.  While  they’re  not 
the  easiest  elements  to  mark  up, 
tables  can  be  extremely  useful  for 
box  scores,  budgets,  etc.  In  the 
next chapter, we’ll take a break from 
HTML markup and I’ll introduce you 
to the design side of the Web with 
CSS—allowing  your  right  brain  to 
play a little.
download reminder
There  is  bonus  conTenT  To 
download for  addiTional markup 
for  The  Table  elemenT  and  an 
assignmenT To TesT your skills!
This page intentionally left blank 
Documents you may be interested
Documents you may be interested