473,385 Members | 1,523 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

How to display table and select next to each other

How to display table and select next to each other?

<html>
<body>
<table border=1 style="display:inline-table">
<tr><td>Hello1</td></tr>
<tr><td>Hello2</td></tr>
<tr><td>Hello3</td></tr>
<tr><td>Hello4</td></tr>
<tr><td>Hello5</td></tr>
</table>
<select size="3">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
</select>
</body>
</html>

In Mozilla 3.0.1, the table is on the left with 5 rows of data. The
select of size 3 is next to it, thanks to the inline-table, which is
fine. However, the bottom of the select aligns with the bottom on the
first table cell. What I want is the top of the select to align with
the top of the table.

IE 7 displays the select below the table, ignoring the inline-table
directive.

So the question is how to get it to align the top of the select with
the top of the table in Mozilla and IE.

Thanks.
Sep 8 '08 #1
10 4593
On Sun, 7 Sep 2008 18:01:04 -0700 (PDT)
"re*************@yahoo.com" <re*************@yahoo.comwrote in:
<ae**********************************@r15g2000prh. googlegroups.com>
How to display table and select next to each other?
[snip]
So the question is how to get it to align the top of the select with
the top of the table in Mozilla and IE.
Consider supporting just a few more browsers.

The following URL may display as desired. It does use a wee bit of
invalid CSS in an attempt to support more Mozilla browsers.

http://tinyurl.com/5fmn8o

--

BootNic Sun Sep 7, 2008 11:09 pm
Humor is emotional chaos remembered in tranquility.
*James Thurber*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.9 (GNU/Linux)

iEYEARECAAYFAkjEl3YACgkQylMUzZO6jeLIJwCggrP+do9ah9 wp3v6AUVOTx+/J
ZJMAoK4YiZwVZthuUYaVVdKsdzrJHAEX
=/u7g
-----END PGP SIGNATURE-----

Sep 8 '08 #2
On 2008-09-08, re*************@yahoo.com <re*************@yahoo.comwrote:
How to display table and select next to each other?

<html>
<body>
<table border=1 style="display:inline-table">
<tr><td>Hello1</td></tr>
<tr><td>Hello2</td></tr>
<tr><td>Hello3</td></tr>
<tr><td>Hello4</td></tr>
<tr><td>Hello5</td></tr>
</table>
<select size="3">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
</select>
</body>
</html>

In Mozilla 3.0.1, the table is on the left with 5 rows of data. The
select of size 3 is next to it, thanks to the inline-table, which is
fine. However, the bottom of the select aligns with the bottom on the
first table cell. What I want is the top of the select to align with
the top of the table.
IE 7 displays the select below the table, ignoring the inline-table
directive.

So the question is how to get it to align the top of the select with
the top of the table in Mozilla and IE.
vertical-align: top on the inline table should do the trick, but not in
browsers that don't support inline-table.

You may have more luck in IE by just floating the table left instead.

By the way your markup is not valid. Check it at http://validator.w3.org
(or with nsgmls).
Sep 8 '08 #3
On 8 Sep, 03:01, "removeps-gro...@yahoo.com" <removeps-
gro...@yahoo.comwrote:
How to display table and select next to each other?
<html>
Don't you have a DOCTYPE declaration?
<body>
The document should at least have a title.
<table border=1 style="display:inline-table">
* <tr><td>Hello1</td></tr>
* <tr><td>Hello2</td></tr>
* <tr><td>Hello3</td></tr>
* <tr><td>Hello4</td></tr>
* <tr><td>Hello5</td></tr>
</table>
<select size="3">
* <option value="1">1</option>
* <option value="1">2</option>
* <option value="1">3</option>
</select>
</body>
</html>

In Mozilla 3.0.1, the table is on the left with 5 rows of data. *The
select of size 3 is next to it, thanks to the inline-table, which is
fine. *However, the bottom of the select aligns with the bottom on the
first table cell. *What I want is the top of the select to align with
the top of the table.

IE 7 displays the select below the table, ignoring the inline-table
directive.
So is FF2, too.
So the question is how to get it to align the top of the select with
the top of the table in Mozilla and IE.
<table border=1 style="float: left; margin-right: 1em">
Sep 8 '08 #4
On Sep 8, 12:21*am, Ben C <spams...@spam.eggswrote:
By the way your markup is not valid. Check it at http://validator.w3.org
(or with nsgmls).
Thanks. Is there a way to validate a file? In the URL there I
entered

file:///C:/Documents%20and%20Settings/whatever

and it says that type of URL is not supported.

I know I didn't have a DOCTYPE.

Dreamweaver has a function to validate markup, and it only says that
my select tag is missing the name value. Strange.

http://www.validome.org/ lets you upload a file to validate, and it
errors out that DOCTYPE is missing. After I enter the DOCTYPE, an
empty head section, I get several errors.
Sep 8 '08 #5
re*************@yahoo.com wrote:
On Sep 8, 12:21 am, Ben C <spams...@spam.eggswrote:
>By the way your markup is not valid. Check it at http://validator.w3.org
(or with nsgmls).

Thanks. Is there a way to validate a file? In the URL there I
entered

file:///C:/Documents%20and%20Settings/whatever

and it says that type of URL is not supported.
You can't check a local file on your hard drive using the "Validate by
URI" tab.

First add a valid doctype:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Then go to the validator page and click the "Validate by file upload"
tab. Browse to the file you want to check.
--
Ed Mullen
http://edmullen.net
Why do banks charge you a non-sufficient funds fee on money they already
know you don't have?
Sep 8 '08 #6
On 2008-09-08, re*************@yahoo.com <re*************@yahoo.comwrote:
On Sep 8, 12:21*am, Ben C <spams...@spam.eggswrote:
>By the way your markup is not valid. Check it at http://validator.w3.org
(or with nsgmls).

Thanks. Is there a way to validate a file? In the URL there I
entered

file:///C:/Documents%20and%20Settings/whatever

and it says that type of URL is not supported.
That's because the website can't read a file from your local disk. In
general that's a good thing-- you don't want just any website you visit
to be able to read your personal files.

You can use the "Direct Input" option and just paste your markup into
the box.
I know I didn't have a DOCTYPE.

Dreamweaver has a function to validate markup, and it only says that
my select tag is missing the name value. Strange.
You have to have a DOCTYPE to validate properly, and you should use one
anyway to avoid the unpredictability of quirks mode.

Use this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
http://www.validome.org/ lets you upload a file to validate, and it
errors out that DOCTYPE is missing. After I enter the DOCTYPE, an
empty head section, I get several errors.
Yes that sounds like it's doing something.
Sep 8 '08 #7
Ben C schrieb:
On 2008-09-08, re*************@yahoo.com <re*************@yahoo.comwrote:
>On Sep 8, 12:21 am, Ben C <spams...@spam.eggswrote:
>>By the way your markup is not valid. Check it at http://validator.w3.org
(or with nsgmls).
Thanks. Is there a way to validate a file? In the URL there I
entered

file:///C:/Documents%20and%20Settings/whatever

and it says that type of URL is not supported.

That's because the website can't read a file from your local disk.
You would request a file "/C:/Documents%20and%20Settings/whatever" on
the _W3C's validator web server_. This may not exist. And, of course,
they don't want anybody to read files on _their_ server.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Sep 8 '08 #8

BootNic wrote:
>
The following URL may display as desired. It does use a wee bit of
invalid CSS in an attempt to support more Mozilla browsers.

http://tinyurl.com/5fmn8o
Forget the invalid CSS... I thought surely this is invalid HTML - a
select element that is *not* inside a form element - yet it passes HTML
4.01 Strict validation.

Curious.

--
Berg
Sep 8 '08 #9
On 8 Sep, 22:36, Bergamot <berga...@visi.comwrote:
BootNic wrote:
The following URL may display as desired. It does use a wee bit of
invalid CSS in an attempt to support more Mozilla browsers.
http://tinyurl.com/5fmn8o

Forget the invalid CSS... I thought surely this is invalid HTML - a
select element that is *not* inside a form element - yet it passes HTML
4.01 Strict validation.

Curious.
The HTML is valid. A div element can contain a flow entity (block or
inline).
A form control, like select, is an inline element:

<!ELEMENT DIV - - (%flow;)* -- generic language/style
container -->
<!ENTITY % flow "%block; | %inline;">
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; |
%formctrl;">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

http://www.w3.org/TR/REC-html40/sgml/dtd.html

"The elements used to create controls generally appear inside a FORM
element, but may also appear outside of a FORM element declaration
when they are used to build user interfaces."
<http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1>
Sep 8 '08 #10
Roy A. wrote:
"The elements used to create controls generally appear inside a FORM
element, but may also appear outside of a FORM element declaration
when they are used to build user interfaces."
The "but" part really means that the authors of HTML specifications wanted
to allow, at the syntax level, the use of <inputelements and other form
fields elements so that they are handled completely via client-side
scripting (read: JavaScript).

As a side effect, the syntax also allows <textareato be used just to
create a scrollable text box - which is almost always a foolish idea.

ObCSS: You can use CSS to make a <divelement (or e.g. <pelement)
scrollable.

Yucca

Sep 9 '08 #11

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

19
by: dmiller23462 | last post by:
Hi guys....I have absolutely NO IDEA what I'm doing with Javascript but my end result is I need two text boxes to stay hidden until a particular option is selected....I've cobbled together the...
3
by: Joachim Klassen | last post by:
Hi all, first apologies if this question looks the same as another one I recently posted - its a different thing but for the same szenario:-). We are having performance problems when...
3
by: blindsey | last post by:
Is there a tool that can take an Access database and generate SQL "CREATE TABLE" statements for all the tables in it?
0
by: M. David Johnson | last post by:
I cannot get my OleDbDataAdapter to update my database table from my local dataset table. The Knowledge Base doesn't seem to help - see item 10 below. I have a Microsoft Access 2000 database...
9
by: Ben R. | last post by:
Hi guys, I've got a DB table of timecards with these fields in the table: ID (Int) UserID (Int) DateWorked (DateTime) HoursWorkedOnThatDate (Double) I'd like to display a grid, with...
2
by: KarlosSultana | last post by:
Hello to those who read this, this is my first ever post! I am currently getting very confused trying to put a <form> in a table-cell: Firstly I have a <div> styled with display:table -this...
4
by: rn5a | last post by:
A MS-Access DB has 3 tables - Teacher, Class & TeacherClass. The Teacher table has 2 columns - TeacherID & TeacherName (TeacherID being the primary key). The Class table too has 2 columns - ClassID...
7
by: TG | last post by:
hi! I am trying to create a sql server table from an excel sheet. Here is the code I have: 'This procedure the xlsx file and dumps it to a table in SQL Server
0
by: removeps-groups | last post by:
Now I'm wondering how to display 3 elements next to each other. I came up with the following solution using float:left, but would like opinions if this is the right way to go. The idea is to...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.